Question

我有一个应用程序（A）向另一个应用程序（B）发出ajax请求以获取wave声音文件的链接。然后，我想使用该链接直接从我的应用程序（A）播放该声音文件。

我尝试创建一个新的audio标记但是我在控制台中收到以下错误。

在Chrome中

无法播放.... NotSupportedError：无法加载，因为没有找到支持的来源。

在FireFox中

播放失败.... NotSupportedError：媒体资源指示 src属性或指定的媒体提供程序对象不合适。

这是我的回调方法，它是在使用我的应用程序（B）中的链接返回ajax请求后触发的。

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);
        });
    }
}

我怎样才能成功，让这个wav文件播放？

Answer 1

音频可正常跨服务器而不会出现其他问题，请参阅下面的示例。

为什么这不起作用可能有很多原因：

检查网络选项卡以确保wav文件位于正确的位置。
检查控制台是否有任何无法加载的警告消息。
检查此question/answer以了解其他调试步骤。
使用您尝试从中获取的网址或有关请求的其他信息进行回发。

function playAudio() {
  var audio = new Audio('http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav');  
  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);
      });
  }
}

<a href="#" onclick="playAudio()">Play Audio</a>

Answer 2

而是在HTML 5 <audio>代码中使用它。

HTML 5可以在不使用JavaScript的情况下播放和控制任何音频格式。

Answer 3

尝试改用 import 函数：

const playAudio = async () => {
    const importRes = await import("./path/to/audio.mp3"); // make sure the path is correct
    var audio = new Audio(importRes.default);
    try {
      await audio.play();
      console.log("Playing audio");
    } catch (err) {
      console.log("Failed to play, error: " + err);
    }
}

如何使用Javascript从外部URL播放音频文件？

3 个答案: