HTML 5 - “内联”播放小型 mp3

Question

我想使用 HTML 5 音频支持来播放 mp3。 我试图使用音频标签，但现在我使用 javascript 来实现。

我的“播放器”只是一个很小的播放图像，按下时会播放音频（并非所有带有进度的音频控制）。

我正在尝试使用 javascript 来播放它。

function playmp3(url){
   var audioElement = document.createElement('audio');
   audioElement.setAttribute('src', url);
   audioElement.load();
   audioElement.play();
}

这是我的代码，它不起作用。当我单击作为我的“播放”按钮的图像时，它执行正常。

Url 是一个包含文件 url 的字符串。

我正在最新版本的 Chrome 和 FF 中进行测试。

Answer 1

尝试监听 canplay 尝试播放 mp3 之前的事件。以下是如何执行此操作的示例：

function playmp3(url){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', url);
    audioElement.load();
    audioElement.addEventListener("canplay", function() {
        audioElement.play();
    });
}

当浏览器可以开始播放 mp3 时，会触发 canplay 事件，但它不保证可以完整播放 mp3。如果这不适合您的目的，您可以收听其他一些相关事件，例如 loadeddata 和 canplaythrough。