我正在尝试从事音频可视化项目,但似乎我什至无法让基础知识发挥作用。它给我无限期的“正在加载...”!我在下面提供了 sketch.js 和 index.html 代码。知道出了什么问题吗?
<!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') 之类的内容,但没有成功。
在 @ggorlen 的帮助下,托管服务器并进行少量代码更改得到了预期的结果。我使用了从 Mac 商店下载的简单网络服务器。另外我将文件目录更改为:
var song
sound = loadSound('fazoland.mp3')
希望这有帮助。