如何使用 Javascript 从外部 url 播放音频文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47893690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to play an audio file from an external url using Javascript?
提问by Junior
I have an app (A) that makes an ajax request to a different app (B) to obtain a link for a wave sound file. Then, I want to use the link to play that sound file directly from my app (A).
我有一个应用程序 (A)，它向另一个应用程序 (B) 发出 ajax 请求以获取波形声音文件的链接。然后，我想使用该链接直接从我的应用程序 (A) 播放该声音文件。
I tried to create a new audiotag but I am getting the following error in the console.
我尝试创建一个新audio标签，但在控制台中出现以下错误。
In Chrome
在 Chrome 中
Failed to play....NotSupportedError: Failed to load because no supported source was found.
无法播放....NotSupportedError：无法加载，因为找不到支持的源。
In FireFox
在火狐中
Failed to play....NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.
无法播放....NotSupportedError: src 属性或分配的媒体提供程序对象指示的媒体资源不合适。
Here is my callback method which is triggered after the ajax request is returned with the Link from my App (B).
这是我的回调方法，它是在 ajax 请求与来自我的应用程序 (B) 的链接一起返回后触发的。
function playAudio(data) {
if(!data || !data.DownloadUrl) {
return;
}
var audio = new Audio(data.DownloadUrl);
audio.type = 'audio/wav';
var playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(function () {
console.log('Playing....');
}).catch(function (error) {
console.log('Failed to play....' + error);
});
}
}
How can I successfully, get this wav file to play?
我怎样才能成功，让这个 wav 文件播放？
回答by Goodbye StackExchange
Audio works correctly cross server without an additional issues, see the example below.
音频跨服务器正常工作，没有其他问题，请参见下面的示例。
There can be a number of reasons why this wouldn't work:
这可能有多种原因导致不起作用：
- Check the network tab to make sure the wav file is in the correct location.
- Check the console for any warning messages of why it couldn't load.
- Check this question/answerfor additional debugging steps.
- Post back with the URL that you're trying to grab from, or additional information about the request.
- 检查网络选项卡以确保 wav 文件位于正确的位置。
- 检查控制台是否有无法加载的任何警告消息。
- 检查此问题/答案以了解其他调试步骤。
- 使用您尝试从中获取的 URL 或有关请求的其他信息回发。
async function playAudio() {
var audio = new Audio('https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_1MG.wav');
audio.type = 'audio/wav';
try {
await audio.play();
console.log('Playing...');
} catch (err) {
console.log('Failed to play...' + error);
}
}<a href="#" onclick="playAudio()">Play Audio</a>回答by adil khan
Instead use it in HTML 5 <audio>tag.
而是在 HTML 5<audio>标签中使用它。
HTML 5 can play and control any audio format without using JavaScript.
HTML 5 可以在不使用 JavaScript 的情况下播放和控制任何音频格式。
