Question

我正在研究一个项目，除非将文件上传到音频，否则似乎无法使用网络音频。如果我禁用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;

}
}

非常抱歉我的代码如此草率。

Answer 1

<audio>元素和JS Audio对象不是同一件事，尽管在幕后它们实现的是同一件事。最终，您将创建一个Audio对象，并尝试使用远程文件填充其音频缓冲区。在执行此操作时，请记住一些重要的内容，a）必须将缓冲区下载到浏览器并通常对其进行解析，b）这不是一个立即的过程，因为您必须等待文件完成完全进入浏览器。

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

网络音频仅适用于URL.createObjectURL

1 个答案: