论坛 › 马黑黑教程专版 › audio播放进度（测试）

马黑黑 发表于 2022-2-4 20:45

audio播放进度（测试）

<style type="text/css">
#jindu {
        position: relative;
        width: 200px;
        font-size: 10px;
        height: 20px;
        line-height: 20px;
        border: 1px solid olive;
        text-align: center;
}
#jd-go {
        background: olive;
        width: 0px;
        height: 20px;
        opacity: 0.5;
        position: absolute;
        left: 0; top: 0;
}
</style>

<div id="au-tips">音乐准备中 ...</div>
<div id="jindu">
        <span id="per">0%</span>
        <div id="jd-go"></div>
</div>

<script language="javascript">

var mjd = document.getElementById('jindu');
var numPer = document.getElementById('per');
var tips = document.getElementById('au-tips');
var jdGo = document.getElementById('jd-go');
var aud = document.createElement('audio');

aud.src ="http://www.kumeiwp.com/sub/filestores/2022/01/19/56c620abaa9b109f11be4dcda66f4844.mp3";
aud.addEventListener('canplaythrough', function() {tips.innerHTML = "音乐准备就绪";}, false);
aud.addEventListener('ended', mPause, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){
        var jd = (100*aud.currentTime)/aud.duration;
        numPer.innerHTML = Math.ceil(jd) + "%";
        jdGo.style.width = jd+ "%";
}
function mPause() {
        tips.innerHTML = aud.paused? "paused" : "play";
}

</script>

马黑黑 发表于 2022-2-4 20:48

一楼仅简单测试一下播放进度，未提供齐全的播放控制

红影 发表于 2022-2-4 22:02

进度条就是这么来的吧{:4_187:}

红影 发表于 2022-2-4 22:03

黑黑玩的都是高技术的东东{:4_173:}

马黑黑 发表于 2022-2-4 23:08

红影 发表于 2022-2-4 22:02
进度条就是这么来的吧

audio作为web页使用的控件，它有若干个接口，这些接口JS可以监听，通过监听，能拿到：

[*]音乐总时长（毫秒）
[*]当前播放的毫秒数


有这两个已知数，播放的百分比可以计算，这样，例中再结合CSS来操纵一个div的宽度，模拟出进度条。

马黑黑 发表于 2022-2-4 23:08

红影 发表于 2022-2-4 22:03
黑黑玩的都是高技术的东东

以前用vb和Delphi做过MP3播放器，懂得原理

红影 发表于 2022-2-5 10:21

马黑黑 发表于 2022-2-4 23:08
audio作为web页使用的控件，它有若干个接口，这些接口JS可以监听，通过监听，能拿到：

[*]音乐总时长 ...

可以拿到这两个数值啊，这太牛了。看你是化成百分比了，化成时分秒也可以的吧。

红影 发表于 2022-2-5 10:23

马黑黑 发表于 2022-2-4 23:08
以前用vb和Delphi做过MP3播放器，懂得原理

厉害。你说的两个软件我都不会，那些原理就更不知道了{:4_204:}

马黑黑 发表于 2022-2-5 15:57

红影 发表于 2022-2-5 10:23
厉害。你说的两个软件我都不会，那些原理就更不知道了

这些软件都过时了

马黑黑 发表于 2022-2-5 15:58

红影 发表于 2022-2-5 10:21
可以拿到这两个数值啊，这太牛了。看你是化成百分比了，化成时分秒也可以的吧。

都可以。一般转换成什么，看需要，并从实现机制最简化考虑

红影 发表于 2022-2-5 19:43

马黑黑 发表于 2022-2-5 15:57
这些软件都过时了

还好没学习过，否则会不会白学啊{:4_173:}

红影 发表于 2022-2-5 19:44

马黑黑 发表于 2022-2-5 15:58
都可以。一般转换成什么，看需要，并从实现机制最简化考虑

这个，觉得也特别神奇呢，我是说可以拿到的那两个数值。

马黑黑 发表于 2022-2-5 19:47

红影 发表于 2022-2-5 19:44
这个，觉得也特别神奇呢，我是说可以拿到的那两个数值。

很多数值都可以拿的。这叫API，一种街口协议。像我们的电脑，有时候要装个驱动，比如声卡驱动，就是基于硬件的协议，你给我提供了协议，我的系统就按协议调用你应有的功能，声卡就能出声。而空间的API，是软对软的协议，有了这个协议，二次开发才成为可能。

红影 发表于 2022-2-5 20:45

马黑黑 发表于 2022-2-5 19:47
很多数值都可以拿的。这叫API，一种街口协议。像我们的电脑，有时候要装个驱动，比如声卡驱动，就是基于 ...

这些太高深了，影子现在还不懂{:5_102:}

马黑黑 发表于 2022-2-5 20:57

红影 发表于 2022-2-5 20:45
这些太高深了，影子现在还不懂

接口，不是街口{:4_170:}

红影 发表于 2022-2-6 14:58

马黑黑 发表于 2022-2-5 20:57
接口，不是街口

哦哦，接口协议。
这个错字好玩{:4_173:}

加林森 发表于 2022-2-6 17:51

学习学习，谢谢老黑。{:4_190:}

马黑黑 发表于 2022-2-6 20:33

加林森 发表于 2022-2-6 17:51
学习学习，谢谢老黑。

{:4_190:}

加林森 发表于 2022-2-6 20:34

马黑黑 发表于 2022-2-6 20:33


谢谢老黑。{:4_191:}

查看完整版本: audio播放进度（测试）