保姆级range进度条音频播放器开发教程（一）
本帖最后由 马黑黑 于 2024-1-26 22:00 编辑 <br /><br /><style>.mum { font-size: 18px; }
.mum p, mum pre { margin: 10px 0; }
.mum pre { padding: 12px; background: #eee; color: blue; font-size: 16px; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.tGreen { color: green; }
</style>
<div class="mum">
<h3>一、创建界面</h3>
<p>我们刚刚开始，对界面不做特别要求，就一个 input type="range" 的标签：</p>
<pre><input id="mprog" type="range" min="0" step="1" max="100" value="0" title="进度条" />
</pre>
<p>这就创建了一个进度条元素。其中：id属性是我们将来控制控制条的依据；type 属性指明 input 标签的类型是滑杆；min 属性指滑杆最小值；step 属性指滑杆步进幅度；max 属性指滑杆最大值；value 属性指滑杆的进度值；title 属性用来显示提示语。效果如下：</p>
<input type="range" min="0" step="1" value="0" title="进度条">
<h3>二、加入音频控件</h3>
<pre><audio id="aud" src="音频地址" controls></audio></pre>
<p>audio 标签提供了网页可用的音频播放控件。属性中，id 与上面的 input 标签同理；src 属性用来指定音频URL地址，地址必须是可用的；controls 属性是显示播放器界面，我们暂时需要它。</p>
<h3>三、了解本节用到的几个 audio 控件相关属性和事件</h3>
<p>（一）属性</p>
<p>1. duration 音频长度 ：此属性只读，返回音频长度，时间以秒计。我们用 audio 控件的 id 来读取音频长度：aud.duration ，只要音频地址有效，aud.duration 就会返回我们音频总秒数；</p>
<p>2. currentTime 当前播放位置 ：设置或返回当前音频的播放位置（秒数）。例如：aud.currentTime 。</p>
<p>（二）事件</p>
<p>timeupdate ：顾名思义，是指播放时间更新，本事件与 currentTime 属性息息相关。</p>
<p>我们要通过监听 audio 控件的 timeupdate 事件来驱动 range 滑杆以模拟进度条的运行，这需要用到 JS 的事件监听语句：</p>
<pre>element.addEventListener('事件名称',函数[,其他]); <span class="tGreen">//element ：元素标识，[其他]参数可选
//实例：监听 timeupdate 事件，在控制台打印当前播放位置</span>
aud.addEventListener('timeupdate', () => {
console.log(aud.currentTime);
});
</pre>
<h3>四、建立音频控件和滑杆控件相关属性的数学关系</h3>
<p>我们已经知道如下数值及其含义：</p>
<pre>aud.currentTime : 当前播放位置（秒数）
aud.duration : 音频总时长（秒数）
mprog.max : 滑杆最大值
mprog.value : 滑杆 value 值即进度值
</pre>
<p>现在，我们要处理的问题是，当音乐播放到 aud.currentTime 的时候，滑杆应该滑动多少单位，亦即，mprog.value 的值是多少。我们来列一个它们的对应关系并进行演算求得滑杆 value 值：</p>
<pre>aud.currentTime : aud.duration = mprog.value : mprog.max
<span class="tGreen">//那么，求 mprog.value 的值：</span>
mprog.value = aud.currentTime / aud.duration * mprog.max
</pre>
<h3>五、编写JS代码</h3>
<pre><script>
aud.addEventListener('timeupdate', () => {
mprog.value = aud.currentTime / aud.duration * mprog.max;
});
</script>
</pre>
<h3>六、整合HTML和JS代码</h3>
<p>input 和 audio 默认都是行内标签，所以我们给它们加上段落 p 标签，这样可以让两个标签是上下位置关系：</p>
<pre><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>
</pre>
<p>运行以上代码，点播放器界面的播放按钮，看看我们的进度条是否正常运行。可以到这里试一试：<a href="http://mhh.52qingyin.cn/api/pcode/">pencil code</a>，或者，将代码保存为本地HTML文档后双击打开查看效果。查看效果时，可以试着拖动 audio 界面的滑杆，看看我们设计的 range 滑杆是否跟它同步。</p>
</div>
想当个保姆都好困难的样纸{:4_198:} 这个讲解特别详细，太赞了{:4_199:} 去试过了，滑杆和aud播放器都在啊，暂停则都停了呢{:4_187:} 红影 发表于 2024-1-26 20:45
去试过了，滑杆和aud播放器都在啊，暂停则都停了呢
这是本系列第一节课，audio播放器界面用来控制音乐的播放/暂停，同时可以跟 range 进度做比较。 红影 发表于 2024-1-26 20:42
这个讲解特别详细，太赞了
这回再不懂我就没辙了 樵歌 发表于 2024-1-26 20:09
想当个保姆都好困难的样纸
吃个瓜呗 有意思！
加上 mprog.onchange 让它俩联动（互动） 马黑黑 发表于 2024-1-26 21:36
这是本系列第一节课，audio播放器界面用来控制音乐的播放/暂停，同时可以跟 range 进度做比较。
嗯嗯，原来还有后续。太好了{:4_187:} 马黑黑 发表于 2024-1-26 21:37
这回再不懂我就没辙了
这个特别好，特别喜欢这么详细的手把手的教学，特别有收获{:4_199:} 马黑黑 发表于 2024-1-26 21:37
吃个瓜呗
不甜不吃{:4_189:} 樵歌 发表于 2024-1-27 11:42
不甜不吃
苦瓜熟了也甜 红影 发表于 2024-1-26 23:09
这个特别好，特别喜欢这么详细的手把手的教学，特别有收获
这个，打算把原理、方法讲透彻吧 红影 发表于 2024-1-26 23:08
嗯嗯，原来还有后续。太好了
必须呀，没到结束，示例基本都是半成品或小半成品的 马黑黑 发表于 2024-1-27 12:23
这个，打算把原理、方法讲透彻吧
通过这个，也可以理解其他以前没理解的了，真好{:4_199:} 马黑黑 发表于 2024-1-27 12:24
必须呀，没到结束，示例基本都是半成品或小半成品的
嗯嗯，等待后续的成品{:4_187:} 红影 发表于 2024-1-27 15:37
嗯嗯，等待后续的成品
这需要一步一步来，一口吃不出胖子来的 红影 发表于 2024-1-27 15:36
通过这个，也可以理解其他以前没理解的了，真好
我也觉得讲的很细了，但扩展其实要靠自己。例如吧：
element.style.setProperty('CSS属性名称','值');
这是JS设置元素 CSS 属性的方法，它还可以设置CSS变量值（写成 --名称，例：--state）。在这里会获得印象，也许也会使用，但是要全面细致弄懂它，还得自己去看文档、领会。 马黑黑 发表于 2024-1-27 17:34
这需要一步一步来，一口吃不出胖子来的
哈哈，那我先苗条着{:4_173:} 马黑黑 发表于 2024-1-27 17:38
我也觉得讲的很细了，但扩展其实要靠自己。例如吧：
element.style.setProperty('CSS属性名称','值'); ...
我只要能这里理解就很好了，以后的事以后再说{:4_173:}