HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

HTML5的Audio元素为网页开发者提供了创建自定义音频播放器的能力。本文将详细介绍如何使用HTML5的Audio API设计一个功能完善的音乐播放器，包括浏览器支持情况、常用控制函数、媒体属性以及实际的代码实现。

HTML5 有两个很炫的元素，就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器，制作一些效果很不错的应用。
无论是视屏还是音频，都是一个容器文件，包含了一些音频轨道，视频轨道和一些元数据，这些是和你的视频或者音频控件绑定到一块的，这样才形成了一个完整的播放组件。

浏览器支持情况

常用的控制函数

只读的媒体属性

可脚本控制的属性值

创建音频元素

在页面中添加一个音频元素：

<audio src="../Media/The sound of silence.mp3" controls="controls" autoplay="autoplay"></audio>

在谷歌Chrome浏览器中的效果如下：

• controls指的是用户控制界面,所以我们可以在Web页面中看到上面这个操作面板，包括播放和暂停，播放进度条，音量进度条，和进度时间显示等。
• autoplay 指的是自动播发已加载的媒体文件，所以我们一打开页面就可以直接播放了

HTML5 Audio API 的界面很强大，功能也很完善，但是我们的Web应用会根据不同的需求、设计风格和界面颜色来要求不同的播放器样式和功能，这就要求我们能基于他们的API 设计出灵活的应用。

设计自定义播放器

接下来，我们设计一款适合我们离线工作系统需要的播放器：

<div id="custom-player">
  <button id="play-pause">Play</button>
  <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
  <input type="range" id="seek" min="0" max="100" value="0">
  <span id="current-time">0:00</span>/<span id="duration">0:00</span>
</div>

添加CSS样式

#custom-player {
  display: flex;
  align-items: center;
}

#play-pause {
  margin-right: 10px;
}

#volume, #seek {
  flex: 1;
  margin: 0 10px;
}

#current-time, #duration {
  margin-left: 10px;
}

页面的元素和CSS样式写完之后，就可以看到一个漂亮的音乐播放器的模型了：

添加功能

只是现在的播放器上面的按钮都是空壳，没有任何功能。所以，现在我们就来添加这些功能 ， 脚本的顶层框架就用Jquery。

$(document).ready(function() {
  var audio = $('audio')[0];

  $('#play-pause').click(function() {
    if (audio.paused) {
      audio.play();
      $(this).text('Pause');
    } else {
      audio.pause();
      $(this).text('Play');
    }
  });

  $('#volume').change(function() {
    audio.volume = $(this).val();
  });

  $('#seek').change(function() {
    audio.currentTime = ($(this).val() / 100) * audio.duration;
  });

  audio.addEventListener('timeupdate', function() {
    var currentTime = Math.floor(audio.currentTime);
    var duration = Math.floor(audio.duration);
    $('#current-time').text(formatTime(currentTime));
    $('#duration').text(formatTime(duration));
    $('#seek').val((currentTime / duration) * 100);
  });

  function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    var secs = seconds % 60;
    return (minutes < 10 ? '0' + minutes : minutes) + ':' + (secs < 10 ? '0' + secs : secs);
  }
});

通过以上代码，我们成功创建了一个功能完善的自定义音乐播放器。这个播放器包含了播放/暂停按钮、音量控制、播放进度条以及当前时间和总时间的显示。你可以根据实际需求进一步扩展和优化这个播放器的功能。