论坛 › 音乐沙龙 › EGM - NgayTho(原版)

马黑黑 发表于 2022-2-12 18:21

EGM - NgayTho(原版)

<style type="text/css">
#paDiv {
        margin: auto;
        width: 220px;
        display: flex;
        align-items: center;
        border: 1px solid olive;
        border-radius: 8px 0px 8px 0px;
        background: rgba(0,0,0,.8);
        box-shadow: 1px 1px 2px #000;
}
#jindu {
        position: relative;
        width: 200px;
        height: 8px;
        line-height: 8px;
        font-size: 10px;
        color: #eee;
        text-align: center;
        background: linear-gradient(90deg, olive, tan, gold) no-repeat;
        background-size: 20px 0px;
}
#btn-ro {
        width: 20px; height: 20px;
        line-height: 20px; font-size: 12px;
        background: linear-gradient(blue, silver, red);
        outline:none;
        color: white;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="paDiv">
        <div id="btn-ro">·</div>
        <div id="jindu">
                <div id="jd-go"></div>
        </div>
</div>

<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="http://www.kumeiwp.com/sub/filestores/2022/02/06/d60dfa330d6f5f2da5e5027f19e33d73.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
        var jd = (100*aud.currentTime)/aud.duration;
        jindu.innerHTML = Math.ceil(jd) + "%";
        jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
        aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

马黑黑 发表于 2022-2-12 18:23

只显示播放进度，代码量已经不少了，虽然外观看着这么单薄：

<style type="text/css">
#paDiv {
        margin: auto;
        width: 220px;
        display: flex;
        align-items: center;
        border: 1px solid olive;
        border-radius: 8px 0px 8px 0px;
        background: rgba(0,0,0,.8);
        box-shadow: 1px 1px 2px #000;
}
#jindu {
        position: relative;
        width: 200px;
        height: 8px;
        line-height: 8px;
        font-size: 10px;
        color: #eee;
        text-align: center;
        background: linear-gradient(90deg, olive, tan, gold) no-repeat;
        background-size: 20px 0px;
}
#btn-ro {
        width: 20px; height: 20px;
        line-height: 20px; font-size: 12px;
        background: linear-gradient(blue, silver, red);
        outline:none;
        color: white;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="paDiv">
        <div id="btn-ro">·</div>
        <div id="jindu">
                <div id="jd-go"></div>
        </div>
</div>

<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="http://www.kumeiwp.com/sub/filestores/2022/02/06/d60dfa330d6f5f2da5e5027f19e33d73.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
        var jd = (100*aud.currentTime)/aud.duration;
        jindu.innerHTML = Math.ceil(jd) + "%";
        jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
        aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

红影 发表于 2022-2-12 18:36

是啊，看着很纤细，代码却是不少。有无图按钮的，还有进度的。{:4_187:}

绿叶清舟 发表于 2022-2-12 19:11

这个播放器漂亮的，感觉评了分以后听到的是二个声音了，错觉吗

马黑黑 发表于 2022-2-12 20:08

绿叶清舟 发表于 2022-2-12 19:11
这个播放器漂亮的，感觉评了分以后听到的是二个声音了，错觉吗

是的，意思是你要给两次评分才合理{:5_117:}

马黑黑 发表于 2022-2-12 20:08

红影 发表于 2022-2-12 18:36
是啊，看着很纤细，代码却是不少。有无图按钮的，还有进度的。

下一步可能会加入可调整进度的

绿叶清舟 发表于 2022-2-12 20:11

马黑黑 发表于 2022-2-12 20:08
是的，意思是你要给两次评分才合理

那得先去黑了系统了{:4_189:}

马黑黑 发表于 2022-2-12 20:23

audio没有设置loop值，可以在JS中create之后加入：

aud.loop = true;


<script>

aud.loop = true;

</script>

红影 发表于 2022-2-12 20:26

马黑黑 发表于 2022-2-12 20:08
下一步可能会加入可调整进度的

是的，这个是它自己播放，无法手动调进度。

马黑黑 发表于 2022-2-12 20:54

红影 发表于 2022-2-12 20:26
是的，这个是它自己播放，无法手动调进度。

一般也不太主张对进度进行调节，但标准播放器具备这个功能，所要将来也要加入

小辣椒 发表于 2022-2-12 21:17

这个可以直接玩的，黑黑太棒了{:4_178:}

风中飞尘 发表于 2022-2-12 21:43

播放器 很漂亮唯美 干净为什么我听不到你的这个音乐可以加一个播放音乐的时间吗   00：00-05：20

马黑黑 发表于 2022-2-12 21:56

风中飞尘 发表于 2022-2-12 21:43
播放器 很漂亮唯美 干净为什么我听不到你的这个音乐可以加一个播放音乐的时间吗   00：00-05：20

听不到音乐，说明你的浏览器对声音的设置没有开启自动播放功能，可以试一下单击那个模拟光盘。当然，还不能听到的话，那就是音乐来源与你的网络不兼容。

时间显示非常容易实现，毕竟，复杂的百分比进度要通过audio的时间相关的数据来完成的。

马黑黑 发表于 2022-2-12 21:59

小辣椒 发表于 2022-2-12 21:17
这个可以直接玩的，黑黑太棒了

我正在加可控进度机制，已经加好了，测试无误后将择机分享代码

马黑黑 发表于 2022-2-12 22:02

绿叶清舟 发表于 2022-2-12 20:11
那得先去黑了系统了

要得要得

红影 发表于 2022-2-13 11:45

马黑黑 发表于 2022-2-12 20:54
一般也不太主张对进度进行调节，但标准播放器具备这个功能，所要将来也要加入

这样也挺人性化，可以让用户决定是否跳过前奏。

马黑黑 发表于 2022-2-13 19:39

红影 发表于 2022-2-13 11:45
这样也挺人性化，可以让用户决定是否跳过前奏。

功能需要总是有的

红影 发表于 2022-2-13 20:06

马黑黑 发表于 2022-2-13 19:39
功能需要总是有的

为了实现功能，就得多加很多代码呢。

马黑黑 发表于 2022-2-13 20:16

红影 发表于 2022-2-13 20:06
为了实现功能，就得多加很多代码呢。

这个并不复杂

红影 发表于 2022-2-13 20:31

马黑黑 发表于 2022-2-13 20:16
这个并不复杂

我看到代码多了就头晕{:4_189:}

查看完整版本: EGM - NgayTho(原版)