在Live Server中打开和在默认浏览器中打开有什么区别

Question

我正在尝试用歌曲可视化工具制作一个音乐播放器。我所有的歌曲都在我的电脑上。

为了制作可视化工具，我使用了以下代码。

window.addEventListener('load', () => {
canvas = document.getElementById("cnv1");
context = canvas.getContext("2d");
audioctx = new AudioContext();
WIDTH = window.innerWidth - 50;
canvas.width = WIDTH - 50;
HEIGHT = 500;
canvas.height = 500;
analyser = audioctx.createAnalyser();
analyser.fftSize = SAMPLES;
oscillator = audioctx.createOscillator();
oscillator.connect(audioctx.destination);
source = audioctx.createMediaElementSource(music);
source.connect(analyser);
source.connect(audioctx.destination);
freqArr = new Uint8Array(analyser.frequencyBinCount);
barHeight = HEIGHT;
window.requestAnimationFrame(draw);
});
function draw() {
if (!music.paused) {
bigBars = 0;
r = 0;
g = 0;
b = 255;
x = 0;
context.clearRect(0, 0, WIDTH, HEIGHT);
analyser.getByteFrequencyData(freqArr);
for (var i = 0; i < INTERVAL; i++) {
if (barHeight >= (240)) {
bigBars++;
}
let num = i;
barHeight = ((freqArr[num] - 128) * 3) + 2;
if (barHeight <= 1) {
barHeight = 2;
}
r = r + 10;
if (r > 255) {
r = 255;
}
g = g + 1;
if (g > 255) {
g = 255;
}
b = b - 2;
if (b < 0) {
b = 0;
}
context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
context.fillRect(x, HEIGHT - barHeight, (WIDTH / INTERVAL) - 1, barHeight);
x = x + (WIDTH / INTERVAL);
}
}
window.requestAnimationFrame(draw);
}

当我通过单击Open in Live Server运行代码时，它运行良好，但当我通过点击Open in Default browser来运行相同的代码时，不工作

我使用VS代码作为代码编辑器。

Answer 1

可能有两个原因：-不支持文件格式无效的文件位置。

请尝试使用Web格式的文件，并检查文件的位置。要检查文件的位置，请在文件上单击鼠标右键，然后转到"属性"选项。现在转到安全选项，复制并粘贴对象名称中给定的路径。