一、创建界面

我们刚刚开始，对界面不做特别要求，就一个 input type="range" 的标签：

<input id="mprog" type="range" min="0" step="1" max="100" value="0" title="进度条" />

这就创建了一个进度条元素。其中：id属性是我们将来控制进度条的依据；type 属性指明 input 标签的类型是滑杆；min 属性指滑杆最小值；step 属性指滑杆步进幅度；max 属性指滑杆最大值；value 属性指滑杆的进度值；title 属性用来显示提示语。效果如下：

二、加入音频控件

<audio id="aud" src="音频地址" controls></audio>

audio 标签提供了网页可用的音频播放控件。属性中，id 与上面的 input 标签同理；src 属性用来指定音频URL地址，地址必须是可用的；controls 属性是显示播放器界面，我们暂时需要它。

三、了解本节用到的几个 audio 控件相关属性和事件

（一）属性

1. duration 音频长度 ：此属性只读，返回音频长度，时间以秒计。我们用 audio 控件的 id 来读取音频长度：aud.duration ，只要音频地址有效，aud.duration 就会返回我们音频总秒数；

2. currentTime 当前播放位置 ：设置或返回当前音频的播放位置（秒数）。例如：aud.currentTime 。

（二）事件

timeupdate ：顾名思义，是指播放时间更新，本事件与 currentTime 属性息息相关。

我们要通过监听 audio 控件的 timeupdate 事件来驱动 range 滑杆以模拟进度条的运行，这需要用到 JS 的事件监听语句：

element.addEventListener('事件名称',函数[,其他]); //element ：元素标识，[其他]参数可选

//实例：监听 timeupdate 事件，在控制台打印当前播放位置
aud.addEventListener('timeupdate', () => {
    console.log(aud.currentTime);
});

四、建立音频控件和滑杆控件相关属性的数学关系

我们已经知道如下数值及其含义：

aud.currentTime : 当前播放位置（秒数）
aud.duration : 音频总时长（秒数）
mprog.max : 滑杆最大值
mprog.value : 滑杆 value 值即进度值

现在，我们要处理的问题是，当音乐播放到 aud.currentTime 的时候，滑杆应该滑动多少单位，亦即，mprog.value 的值是多少。我们来列一个它们的对应关系并进行演算求得滑杆 value 值：

aud.currentTime : aud.duration = mprog.value : mprog.max
//那么，求 mprog.value 的值：
mprog.value = aud.currentTime / aud.duration * mprog.max

五、编写JS代码

<script>

aud.addEventListener('timeupdate', () => {
	mprog.value = aud.currentTime / aud.duration * mprog.max;
});

</script>

六、整合HTML和JS代码

input 和 audio 默认都是行内标签，所以我们给它们加上段落 p 标签，这样可以让两个标签是上下位置关系：

<p><input id="mprog" type="range" min="0" step="1" max="100" value="0" title="进度条" /><p>
<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1371721382" controls></audio></p>

<script>

aud.addEventListener('timeupdate', () => {
	mprog.value = aud.currentTime / aud.duration * mprog.max;
});

</script>

运行以上代码，点播放器界面的播放按钮，看看我们的进度条是否正常运行。可以到这里试一试：pencil code，或者，将代码保存为本地HTML文档后双击打开查看效果。查看效果时，可以试着拖动 audio 界面的滑杆，看看我们设计的 range 滑杆是否跟它同步。