如何播放从服务器下载的 mp3 文件的声音 - 我是使用流数据的新手

Question

我的服务器上有一个名为 test.mp3 的文件 - 我可以播放它

我正在尝试使用 xmlhttprequest get 下载它，然后将响应分配给音频播放器。

我努力了

servpl.onclick = e =>{
const xhr = new XMLHttpRequest();

xhr.open('GET', 'sounds/test.mp3');

// Send the request over the network
xhr.send();
xhr.onload = function() {
if (xhr.status != 200) { // analyze HTTP status of the response
    alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
} else { // show the result
    alert(`Done, got ${xhr.response.length} bytes`); // response is the server response
    //    recordedAudio.autoplay=true;
    recordedAudio.src=xhr.response;
    recordedAudio.play();

   document.getElementById("display").innerHTML+=" after play sound";  
 
    }
};
document.getElementById("display").innerHTML+=" Server Play clicked";   

}

Answer 1

您可以像这样使用audio标签播放该 mp3 文件

<audio autoplay>
  <source src="sounds/test.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

您还可以使用 JS 创建audio标签

var audio = document.createElement('audio');
audio.src = 'sounds/test.mp3';
audio.type = 'audio/mpeg';
document.body.appendChild(audio);

在这种情况下，您需要监视readyState以查看音频是否已加载并准备好播放。 另一种选择是为oncanplay事件添加处理程序。 加载音频后，您可以执行audio.play(); 开始播放。

请注意，主要浏览器将允许您仅从button.click处理程序或用户触发的其他事件处理程序中执行audio.play()命令。 这是一种安全措施，可防止网站在后台自动播放媒体，而不允许用户查看/控制它们。

请让我知道这可不可以帮你。