|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2022-6-3 09:15 编辑
首先：要有一个audio播放器，它不出现界面，有个id标识，HTML帖子的组成部分，代码放在帖子代码前后、中间都行，建议放在帖子代码的最后面：
<!-- 这里是帖子代码 -->
<audio id="aud" src="MP3地址" autoplay="autoplay" loop="loop"></audio>
这是简化的 audio 标签代码，其中一个重要属性没有给出，controls="controls"，就是因为它的缺席，audio播放器没有界面。没有界面，我们就需要一个可以控制它并能显示播放进度的元素——
其次：要有一个可替代 controls 的第三方元素做界面，该界面至少可以通过点击控制音乐的播放|暂停，最好还能显示播放进度。最方便的莫过于 meter 标签，它用于呈现事物运行、发展的进度，代码不算复杂，属性都是语义性十足的：
<meter id="meter" min="0" max="100" value="0" low="33" high="66" optimum="80"></meter>
蓝色代码是id赋值，将来对它的事件操作句柄的依据，必须；红色代码是 meter 标签必需属性，分别规定 meter 标签的起始值（最小值，【例中】计量从 0 开始），终止值（最大值，【例中】100为计量的最大值），value则是当前进度；红紫色代码 low（低）、high（高）和 optimum（优）用于评判或判断任务完成状态，能使计量进度条显示出不同的颜色，可选属性。
当然也可以使用其他元素来充当控制按钮、模拟进度条或呈现数字化的播放进度，如旋转或移动的元素、可变化颜色的东东等等。
第三：JS介入，实现最终效果。按下面的步骤做，不会太难：
① 获得元素的操作句柄
我们要控制 audio 标签，要操作 meter 标签，所以，需要获得这两个标签的操作权限，得到操作标识，然后就可以通过这个操作标识去操作这些标签：
let aud = document.querySelector('#aud');
let meter = document.querySelector('#meter');
上面两句，let 是声明JS变量，它之后是变量名称，然后我们赋值给所声明的变量，document.querySelector() 是JS内置函数 querySelector() 的具体应用语句，都是基于文档操作的，所以有前缀 document. 这样的东东，表明是基于dom操作的，是内置函数的操作依据。querySelector 是查询选择器函数，我们前面定义了元素的 id ，所以参数使用 #名称，置于小角引号之内。
② 监听播放器播放进度：用JS的 addEventListener() 内置方法函数——
aud.addEventListener('timeupdate', function(){
// 代码
});
上面，是监听语句框架。监听依托 aud 变量，联系前面的内容可以知道，aud 变量是 audio 标签的操作句柄，我们通过这个已经获得授权的句柄去监听audio元素的 timeupdate 事件，这个事件是audio标签在播放时的时间更改事件，只要处于播放状态，它就不断发生变化，基于播放进度的变化。监听中要做一些事情，我们用 function() { //... } 这样的结构来组织所做事情的代码，实际上这是在制作一个自定义函数，内嵌于监听语句结构之内，放在 {} 之中。
③ 计算播放进度并根据进度驱动 meter 元素的 value 值
audio在播放时，有两个我们要用到的属性是 duration 和 currentTime，前者是音乐总时长，单位为秒，后者是当前播放时长，单位也是秒。那么，读过初中的童鞋就可以轻而易举地计算百分比进度了：
100 * currentTime / duration
当然，上句是纯数学写法， JS 是这样写的（要标出是谁的当下播放时长、谁的总时长）：
100 * aud.currentTime / aud.duration
我们再改造一下代码，设置一个变量来接收上面式子计算出的值：
let prog = 100 * aud.currentTime / aud.duration;
这意味着，在监听过程中，我们每时每刻都能得到一个播放完成量的百分比的值。那么，驱动我们的 meter 进度就解决了：
meter.value = prog;
我们还可以在另外一个元素显示播放百分比（HTML结构中需要存在这么一个标签）：
document.querySelector('.msgDiv').innerText = prog + '%';
这些，都放在监听事件的函数里：
aud.addEventListener('timeupdate',function(){
let prog = 100 * aud.currentTime / aud.duration;
let deg = prog * 360 / 100;
meter.value = prog;
//document.querySelector('.msgDiv').innerText = prog + '%';
});
显示播放百分比的代码我先注释掉，在确保你的测试程序中存在一个 class="msgDiv" 的实体标签之后，可以去掉注释。
④，最后，就是播放与暂停了，我们可以借助 meter 标签的单击事件来完成：
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
这句代码使用了箭头函数，() => 等同于 function()，不理解没关系，套用就好；红色部分的代码理解一下它的意思，这里用到了三元运算符，其意为，如果播放器暂停中，则（单击时）播放音乐，反之，（单击时）暂停音乐。问号（?）表示问前面的 aud.paused （暂停）是否为真，问号后面的 aud.play() 表示（若为真则）播放，冒号后面的 aud。pause() 表示（若为假则）暂停。三元运算是 if 语句群的语法糖，它使得代码及其简短。
如果想让那个显示百分比数字的元素也能和meter标签一样可操控暂停播放，则这么办，很绝妙：
document.querySelector('.msgDiv').onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
当然，每次操作 msgDiv 都写一串长长的代码，不如事先声明操作句柄，变量名为 msg，let msg = document.querySelector('.msgDiv')，那么上面那句可以改为：
msg.onclick = meter.onclick = () => aud.paused ? aud.play() : aud.pause();
这很容易看得出，两个元素的单击事件（onclick）共享一组控制代码！
ps：以上内容在线一挥而就，尚未查错，但相信原理绝对没错的。
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|
发表于 2022-6-3 08:56
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
