Web 音频仅适用于 URL.createObjectURL答案

【问题标题】：Web audio only works with URL.createObjectURLWeb 音频仅适用于 URL.createObjectURL
【发布时间】：2019-07-14 10:14:43
【问题描述】：

我正在处理一个项目，除非我将文件上传到音频，否则我似乎无法使用网络音频。如果我禁用 mediaElement 源内容，这些都可以工作。这是我的 HTML：

<div id="content">
<input type="file" id="thefile" accept="audio/*" multiple/>
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
<audio id="audio">
<source src = "https://github.com/JuniperMakesStuff/JUNIVERSEGAME/blob/master/Nightcore%20-%20Rasputin%20(Remix)%20%E2%9C%95.mp3?raw=true" type = "audio/*">
</audio>
</div>

然后我又试了两套JS，这里是……

这个可以，但是当我上传文件时，它会播放（我想播放不同的文件）

document.addEventListener('mousemove',function(event){
 mx = event.clientX
 my = event.clientY
})
var mx = 0
var my = 0

var all=0;
var shuffle=0;
var shuffleglide = 0;
var holdtime1 = 0;
var files = this.files
var selected = 0;
var previousall = 0;
var avg = 0;
var time = 0;
window.onload = function() {

var file = document.getElementById("thefile");
var audio = new Audio("https://github.com/JuniperMakesStuff/JUNIVERSEGAME/blob/master/Nightcore%20-%20Rasputin%20(Remix)%20%E2%9C%95.mp3?raw=true","mp3")

file.onchange = function() {
files = this.files;
selected = 0;
audio.src = URL.createObjectURL(files[0])
audio.load();
audio.currentTime = 0;
audio.play();
audio.loop = false;
var context = new AudioContext();
console.log(context)
var src = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();

src.connect(analyser);
analyser.connect(context.destination);

analyser.fftSize = 2048;

}
}

而且这个直接不播放任何音频，即使我告诉它播放不同的 URL

document.addEventListener('mousemove',function(event){
mx = event.clientX
my = event.clientY
})
var mx = 0
var my = 0

var all=0;
var shuffle=0;
var shuffleglide = 0;
var holdtime1 = 0;
var files = this.files
var selected = 0;
var previousall = 0;
var avg = 0;
var time = 0;
window.onload = function() {

var file = document.getElementById("thefile");
var audio = new Audio("https://github.com/JuniperMakesStuff/JUNIVERSEGAME/blob/master/Nightcore%20-%20Rasputin%20(Remix)%20%E2%9C%95.mp3?raw=true","mp3")

file.onchange = function() {
files = this.files;
selected = 0;
audio.src = new URL("https://github.com/JuniperMakesStuff/JUNIVERSEGAME/blob/master/Blip_Select3.wav?raw=true");
audio.load();
audio.currentTime = 0;
audio.play();
audio.loop = false;
var context = new AudioContext();
console.log(context)
var src = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();

src.connect(analyser);
analyser.connect(context.destination);

analyser.fftSize = 2048;

}
}

真的很抱歉我的代码太草率了。

【问题讨论】：

在所有这些过程中音频上下文的状态是什么？（例如，使用requestAnimationFrame 继续检查context.state）。我认为它会一直是suspended，因为没有用户交互就无法开始播放音频。

标签： javascript web-audio-api

【解决方案1】：

<audio> 元素和 JS 的 Audio 对象不是同一个东西，尽管它们实际上实现了同一个东西。最终，您将创建一个 Audio 对象并尝试使用远程文件填充它的音频缓冲区。执行此操作时记住几件事很重要，a）缓冲区必须下载到浏览器，并且通常会被解析，b）这不是一个即时过程，因为您必须等待文件完全来到浏览器。

可以将您的远程源预加载到您在浏览器中缓存的缓冲区中，然后按需换出缓冲区，这只需要一点工作。最后，您必须 a) 下载音频源，b) 将该源解码到 audioContext 缓冲区，然后 c) 将其应用于音频的 destination。它相当复杂，需要进行一些研究才能弄清楚所有来龙去脉。您可以在 MDN 上的 BaseAudioContext.decodeAudioData 文档中找到一个基本的一次性示例。您还可以在 SoundTouchJS 库存储库中找到示例。

【讨论】：