HTML5音乐播放器组件

HTML5 的

播放器的核心是

<audio id="myMusic" src="music.mp3" controls autoplay></audio>

一行 HTML，基本功能全齐。你想加点交互？也简单，用 JavaScript 一监听，按钮控制播放/暂停、音量调整、进度条同步，分分钟搞定。

比如搞个按钮控制播放：

var audio = document.getElementById('myMusic');
document.getElementById('playBtn').addEventListener('click', function() {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});

是不是挺眼熟？逻辑简单明了，状态判断完就切换。

还有个挺实用的点，就是多音频格式兼容。用标签给不同格式兜个底：

<audio id="myMusic">
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

这样不管浏览器支不支持 MP3，Ogg 还能兜着，挺稳的。

想再丰富点，可以搞个自定义进度条，动态显示播放进度：

<div id="progressBar">
  <div id="progress"></div>
</div>

audio.addEventListener('timeupdate', function() {
  var progress = (audio.currentTime / audio.duration) * 100;
  document.getElementById('progress').style.width = progress + '%';
});

代码量不大，但效果挺赞的，用户体验直接上一个台阶。

如果你还想深入点，推荐看看这几个资源，基本涵盖了从入门到扩展的玩法：

• html5 音乐播放器 audio 标签使用概述
• 利用 HTML5 的 Audio 标签实现音乐播放器
• jquery html5 音乐播放器.rar
• HTML5 + jQuery 音乐播放器插件

如果你想做个简单实用的网页音乐播放器，HTML5 的绝对值得一试。灵活、轻量、好上手，还挺有扩展空间，玩着有成就感。