使用p5.js导入音频

问题描述 投票:0回答:1

我正在尝试从事音频可视化项目,但似乎我什至无法让基础知识发挥作用。它给我无限期的“正在加载...”!我在下面提供了 sketch.js 和 index.html 代码。知道出了什么问题吗? loading...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="libraries/p5.min.js"></script>
        <script src="libraries/p5.sound.min.js"></script>
    <script src="sketch.js"></script>
  </head>

  <body>
  </body>
</html>
var song
var fft

function preload() {
  soundFormats('mp3')
  song = loadSound('/Users/noah/Desktop/programing/personals/p5_crazyy/fazoland.mp3')
}
 
function setup() {
  createCanvas(windowWidth, windowHeight)
  fft = new p5.FFT()
}

// command + q to display sovisual window
function draw() {
  background(0)
  stroke(255)

  var wave = fft.waveform()

  for (var i = 0; i < width; i++) {
    var index = floor(map(i, 0, width, 0, wave.length))
    var x = i
    var y = wave[index] * 300 + height  / 2
    point(x, y)
  }
}

function mouseClicked() {
  if (song.isPlaying()) {
    song.pause()
  } else {
    song.play()
  }
}

我尝试添加诸如 soundFormats('mp3') 之类的内容,但没有成功。

javascript html p5.js
1个回答
0
投票

在 @ggorlen 的帮助下,托管服务器并进行少量代码更改得到了预期的结果。我使用了从 Mac 商店下载的简单网络服务器。另外我将文件目录更改为:

var song
sound = loadSound('fazoland.mp3')

希望这有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.