3

我有一个问题，如果将音频文件作为 src 属性直接添加到 html5 源代码中，我可以播放它，但如果我尝试在运行时设置 src，它不会播放。

最初我有以下包含一些音频标签的 HTML：

<audio id="audio1" controls preload="none" src="http:/theurl/clip1.mp3"></audio>
<audio id="audio2" controls preload="none" src="http:/theurl/clip2.mp3"></audio>

使用以下函数播放剪辑，该函数使用 id 和剪辑 url 调用：

function audioClick(id, clip) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

这可行，当用户点击页面的相关部分时，会播放相应的音频文件，但问题是浏览器需要大约 3-4 秒来加载页面，这太长了。我已经找到了延迟的原因是由于 src 属性是远程文件。并且将 preload 设置为“none”或“metadata”并不能加快速度。

所以为了解决这个问题，我想在运行时设置 src，所以将函数更改为：

function audioClick(id, clip) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.setSrc(clip);
        audio.load();
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

我尝试将html设置为此

<audio id="audio1" controls></audio>
<audio id="audio2" controls></audio>

但有两个问题：1) 音频不播放 2) 控件显示初始消息说文件无法播放

我没有在控件中显示无法播放文件的消息，因此我将 html 更改为：

<audio id="audio1"></audio>
<audio id="audio2"></audio>

但是文件不播放的问题仍然存在。

以这种方式完成后，为什么音频文件不播放？

4

2 回答 2

2

当您的目标是 iOS 时，会有一些陷阱。第一个是设置音频标签的属性 preload 什么都不做。iOS 只会做它想做的事，而我们对此无能为力。

我认为 Yoshi 的代码在 chrome 中运行良好但在 iOS 中运行良好的原因是因为 iOS 要求对 audio.play() 的所有调用都与单击事件在同一个调用堆栈中。由于 canplay 事件的调用结果我认为它被 iOS 忽略了。此外，当您设置 src 时，iOS 不会预加载任何音频。您需要调用 audio.load() 来执行此操作，但就像以前一样，您需要用户单击某些内容才能让 iOS 实际执行该功能。

要使其在 iOS 中工作，您需要避免 canplay 回调并简单地使用：

audio.src = src;
audio.play();

它不太理想。Safari 加载文件时可能需要一两秒钟，但它应该可以工作。与 android 浏览器或更好的新移动 chrome 相比，iOS 对 HTML5 音频的处理相当有限。Mobile Safari 有点把规范抛到了窗外，只是做它想做的事。

于 2012-08-30T15:57:56.523 回答
0

尝试类似：

function audioClick(id, src) {
  var audio = document.getElementById(id);
  if (audio.paused) {
    audio.addEventListener('canplay', function canplay() {
      this.removeEventListener('canplay', canplay, false);
      this.play();
    }, false);

    audio.src = src;
  }
  else {
    audio.pause();
    audio.currentTime = 0;
  }
}

并查看其他可用的媒体事件。

于 2012-08-29T15:08:38.790 回答