保姆级range进度条音频播放器开发教程（三）
本帖最后由 马黑黑 于 2024-1-28 12:04 编辑 <br /><br /><style>.mum { font-size: 18px; }
.mum pre { padding: 12px; background: #eee; color: blue; font-size: 16px; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.mum a { color: darkred; }
.mum a:hover { color: red; }
.tGreen { color: green; }
.tRed { color: red; }
</style>
<div class="mum">
<p>在 <a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=73858&extra=page%3D1" target="_blank">保姆级range进度条音频播放器开发教程（二）</a> 一讲中，我们去掉了 audio 控件的UI界面、用图片充当按钮接管音频播放/暂停的工作。不过，细心的朋友可能已经发现了一些问题，比如音乐播放结束之后按钮的旋转还在继续，抑或当设置了audio自动播放，音乐播放后按钮不会旋转，等等。这是因为缺乏相应的智能联动控制机制所致——我们只是通过按钮的点击事件设置了 --state 这个CSS变量来操控按钮。本节将重点处理这个问题，建立音频和按钮的完好关系，达到音频与按钮旋转动作的智能联动效果。这需要用到 audio 控件的两个事件：</p>
<pre>
① onpause : 暂停事件
用 JS 的 监听方法时，按规范，所有 onxxx 的元素事件，统统不要 on 前缀。例：
<span class="tRed">aud.addEventListener('<span class="tRed">pause</span>', () => {<span class="tGreen">/*做点什么*/</span>});</span>
注意：这里的 onpause 在 addEventListener() 中写成 pause，但它和 pause() 方法不是同一个东东，要区分开来：前者是元素的事件，与元素的点击事件同属一个类型，后者是audio对象的属性方法，用于发起一个暂停动作。
② onplaying : 正在播放事件
同样地，JS监听事件的方法也不要前缀 on，例：
<span class="tRed">aud.addEventListener('<span class="tRed">playing</span>', () => {<span class="tGreen">/*做点什么*/</span>});</span>
【注意】audio 还有一个 onplay 事件，和 onplaying 不同，它表示音频（部分或全部）准备就绪可以播放了。onplaying 和 onplay 的主要区别不难理解，记住也不难（~ing后缀表示正在进行）。我们用前者 onplaying 而不是后者就在于它们的本质区别：我们要的结果是，音频是否已经在播放中。
</pre>
<p>假设我们已经有了一个处理按钮是旋转还是静止状态的函数 mState() ——我们稍后要编写它——，那么，可以想象，我们通过监听上述两个事件来运行这个函数，按钮的旋转与否就可以达到我们前述的所谓智能联动预期。理由：<span class="tRed">onpause</span> 事件发生时，音乐暂停，mState 函数则会令 --state 这个CSS变量值变为 'paused'（又一个 paused！它是CSS的，不是audio的）；<span class="tRed">onplaying</span> 事件发生时，音乐正在播放中，则 mState 函数会令 --state 变量值变为 'running'（谢天谢地！CSS这回没有使用 playing）。这个可以理解吧？如果能理解，那就看看监听事件代码，否则需要花点时间慢慢琢磨，领会后再往下看：</p>
<pre>
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
</pre>
<p>代码非常简单，就是监听 pause（onpause） 和 playing（onplaying）事件，当这两个事件发生时，都运行 mState() 函数。下来就是重头戏：编写我们冰雪聪明的 mState() 函数，mState 是我们自己命名的，可以用其它的，我们之所以用 mState，m指music，state指状态，多少有点意思：</p>
<pre>
var mState = () => {
if (aud.paused) { <span class="tGreen">/* 如果audio处在暂停状态 */</span>
btnplay.style.setProperty('--state', 'paused'); <span class="tGreen">/* 让按钮的旋转停下 */</span>
} else {<span class="tGreen">/* 否则 */</span>
btnplay.style.setProperty('--state', 'running'); <span class="tGreen">/* 让按钮的转起来 */</span>
}
};
<span class="tGreen">/* 用三目运算改写上述 mState 函数，感受一下语法糖的精美 */</span>
var mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
</pre>
<p>这个其实就是上一节图片按钮的功能之一，是从那里剥离出来的功能模块，不同的是现在这个功能用于函数而非元素的相关事件，它可以被反复调用——如前已述，两个 audio 控件监听事件时刻监听着这个函数，随时控制着按钮的旋转动作。 如果（if）条件语句的依据依然是 <span class="tRed">aud.paused</span>，<span class="tRed">paused</span> 对象属性是 audio 控件一个重要属性，上节提到过，它返回音频是否处于暂停状态，在对 audio 控件不使用异步编程的情况下，paused 属性是判断音频控件最为可靠的依据。</p>
<p>mState() 函数主要负责管理按钮的旋转状态（将来功能可以扩展），它的加持通过 audio 的 onpause 和 onplaying 两个监听事件对它的调用加以实现，从而介入对按钮运行状态的实质性管理。这样，按钮的点击事件就不用管自身旋转与否的问题，只需专心负责音乐的播放与暂停就好（我们用三目运算写法替代原来冗长的if语句）：</p>
<pre>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</pre>
<p>解释一下三目运算，也称三元运算。上句是经典的三目运算语句，问号 ? 问，前面的 aud.paused 是否成立？答，成立的话，播放音乐【aud.play();】。冒号 : 说，否则，停止音乐【aud.pause();】。</p>
<p>最后，组织一下新的代码，看看我们的产品是不是有些长进：</p>
<pre>
<style>
#mplayer {
position: absolute;
text-align: center;
color: white;
}
#mplayer p {
margin: 0;
padding: 0;
}
#mprog {
width: 240px;
accent-color: darkgreen;
outline: none;
cursor: pointer;
}
#btnplay {
width: 80px;
height: 80px;
cursor: pointer;
animation: rotating 6s infinite linear var(--state);
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=4046323"></audio>
<div id="mplayer">
<p><img id="btnplay" src="https://638183.freep.cn/638183/small/002_133507167677724892.png" title="播放/暂停" alt="" /></p>
<p><input id="mprog" type="range" min="0" max="100" step="0.1" value="0" title="调节进度" /></p>
</div>
<script>
var mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('timeupdate', () => {
mprog.value = aud.currentTime / aud.duration * mprog.max;
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre>
<p>运行上述代码，音乐播放完毕，按钮会停止旋转。给 audio 标签加入 autoplay，如果浏览器支持自动播放，按钮会自动旋转，反之如果浏览器不支持自动播放，按钮静止不动、直至我们去点击它。<a href="http://mhh.52qingyin.cn/api/pcode/" target="_blank">pencile code</a> 可以运行上述代码，也可以将代码存为本地html文件再运行。</p>
</div>
<a href="" target="_blank">pencile code</a>
指向论坛首页了 还可以继续做（四），音乐停止时滑杆指示可以被拖动到任意位置{:5_106:} 原来CSS的和audio的控制音乐的语句不一样呢，这个之前从来没注意过{:4_173:} “如果浏览器支持自动播放，按钮会自动旋转”
我浏览器设置了自动播放，按钮还是没转啊，需要点击才开始呢。
进度条没法拉进度，等了一会，直到音乐播放完，按钮果真停止了{:4_187:} 又学到不少东西。黑黑辛苦了{:4_184:} 红影 发表于 2024-1-28 11:07
又学到不少东西。黑黑辛苦了
{:4_180:} 起个网名好难 发表于 2024-1-28 10:01
指向论坛首页了
忘了粘贴链接，谢谢提醒 起个网名好难 发表于 2024-1-28 10:06
还可以继续做（四），音乐停止时滑杆指示可以被拖动到任意位置
播放的时候也可以，不过还没时间动手写 红影 发表于 2024-1-28 10:57
原来CSS的和audio的控制音乐的语句不一样呢，这个之前从来没注意过
CSS是不能控制音乐的！
CSS通过CSS变量告知元素动画是否运行，它并不能控制音乐。而要动态改变CSS变量，CSS自己无能为力，需要JS通过监听、判断，去改变CSS的变量值。 红影 发表于 2024-1-28 10:59
“如果浏览器支持自动播放，按钮会自动旋转”
我浏览器设置了自动播放，按钮还是没转啊，需要点击才开始呢 ...
还没到调节进度这一步，不要焦急 红影 发表于 2024-1-28 10:59
“如果浏览器支持自动播放，按钮会自动旋转”
我浏览器设置了自动播放，按钮还是没转啊，需要点击才开始呢 ...
看样纸保姆不好做，俺还是去做保公得了{:4_170:}
代码中，audio 标签并没有设置自动播放，你的浏览器支持自动播放，可是音频控件没有自动播放，不播放就不会令按钮旋转。原文将由 autoplay 问题，你在看看 马黑黑 发表于 2024-1-28 12:02
谢茶{:4_187:} 马黑黑 发表于 2024-1-28 12:08
CSS是不能控制音乐的！
CSS通过CSS变量告知元素动画是否运行，它并不能控制音乐。而要动态改变CSS变量 ...
嗯嗯，这就是为什么一直有变量参与其中的缘故吧。 马黑黑 发表于 2024-1-28 12:09
还没到调节进度这一步，不要焦急
嗯嗯，等着下一节课程{:4_187:} 马黑黑 发表于 2024-1-28 12:13
看样纸保姆不好做，俺还是去做保公得了
代码中，audio 标签并没有设置自动播放，你的浏览器 ...
怪我，我没去仔细看就提问了{:4_196:} 红影 发表于 2024-1-28 15:45
怪我，我没去仔细看就提问了
猴急心态 红影 发表于 2024-1-28 15:44
嗯嗯，等着下一节课程
吃透讲过的，会有很大长进 红影 发表于 2024-1-28 15:44
嗯嗯，这就是为什么一直有变量参与其中的缘故吧。
变量的好处是变量的值是可以变的（所以叫变量），CSS变量值变了，浏览器就能根据新的变量值渲染使用该变量的元素，而谁用了这个变量，是在CSS里指派的。但CSS是静态的语言，它对变量的值只能初始的时候赋值一次，页面加载完毕它啥也干不了了。而JS是动态的，任何时候它都可以改变现有的一切，甚至可以创建新的元素、新的CSS样式。