html5 – HTML 5 – 播放小型mp3“内联”

前端之家收集整理的这篇文章主要介绍了html5 – HTML 5 – 播放小型mp3“内联”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用 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.

解决方法

在尝试播放mp3之前尝试侦听 canplay事件.这是一个如何做到这一点的例子:
function playmp3(url){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src',url);
    audioElement.load();
    audioElement.addEventListener("canplay",function() {
        audioElement.play();
    });
}

当浏览器可以开始播放mp3时会触发canplay事件,但它并不保证它可以播放mp3以完成.如果这不符合您的目的,您可以收听其他几个相关事件,例如loadeddatacanplaythrough.

猜你在找的HTML5相关文章