小辣椒现在咋样啦能吃鸡腿了没
本帖最后由 马黑黑 于 2022-2-5 20:06 编辑 <br /><br /><style type="text/css">/* 父框 */
#mainBox {
margin: auto;
position: relative;
display: flex;
align-items: center;
width: 180px;
height: 30px;
}
/* 按钮、滑块、百分比显示区 */
#mainBox div { color: olive; font-size: 10px; width:40px;}
#mainBox input { outline: none; cursor: pointer; font-size: 10px; }
#mainBox input {
width: 100px;
background: red;
}
#mainBox input {
width: 40px;
border: 1px solid tan;
border-radius: 8px;
}
</style>
<p>弄个播放器送给小辣椒：虽然主要针对功能的实现，外观不咋地，但好歹是个心意。歌是小辣椒喜欢的，不过找不到童声版<br> </p>
<!-- 播放器HTML代码开始-->
<div id="mainBox">
<input id="mbtn" type="button" value="播放" />
<input id="bar" type="range" value="0" />
<div id="per"></div>
</div>
<!-- 播放器HTML代码结束-->
<script language="javascript">
//各操作变量
var mbtn = document.getElementById('mbtn');
var bar = document.getElementById('bar');
var per = document.getElementById('per');
var aud = document.createElement('audio');
var barGo = true; //进度操作标识
//audio设定
aud.src ="http://www.kumeiwp.com/sub/filestores/2021/01/17/8f8074b0b391a0e0d3a53d88442a803f.mp3";
aud.addEventListener('canplaythrough', function() { per.innerHTML = "0"; }, false);
aud.addEventListener('ended', iplay(0), true);
aud.addEventListener('timeupdate', barVal, true);
//aud.autoplay = "autoplay";
aud.loop = "loop";
mbtn.value = aud.autoplay ? "暂停" : "播放";
//播放进度
function barVal(){
if(barGo){ // 若滑块无人为操作：指示播放进度
var jindu = Math.ceil(100*aud.currentTime/aud.duration);
bar.value = jindu;
per.innerHTML = jindu + "%";
}
}
function iplay(flag){ //播放暂停及按钮状态
if(flag==1){
aud.paused ? (aud.play(), mbtn.value="暂停") : (aud.pause(), mbtn.value="播放");
}else{
aud.loop ? mbtn.value = "暂停" : mbtn.value = "播放";
}
}
//滑块鼠标按下：尚未考虑左右键
bar.onmousedown = function() { barGo = false; }
//滑块鼠标松开：尚未考虑左右键
bar.onmouseup=function(){
var x = bar.value*aud.duration/100;
aud.currentTime = x;
barGo = true;
}
//按钮按下
mbtn.onclick = function(){ iplay(1); }
</script>
没有声音呢？{:4_203:} 哦，点了就有了。老黑这个播放器还真厉害。{:4_199:} 这个我其实一直听不懂，有好几句我听成：
[*]边格蝶 -（白话是哪个跌的意思）
[*]生个娃 - （好像也就是这意思）
[*]养条狗 -（好像是拉个勾）
{:4_170:}
加林森 发表于 2022-2-5 19:59
没有声音呢？
按钮 加林森 发表于 2022-2-5 20:00
哦，点了就有了。老黑这个播放器还真厉害。
播放器没有设置自动播放 马黑黑 发表于 2022-2-5 20:01
按钮
明白了，真好用。{:4_191:} 马黑黑 发表于 2022-2-5 20:01
播放器没有设置自动播放
嗯嗯，明白的。 加林森 发表于 2022-2-5 20:03
嗯嗯，明白的。
我把自动播放的语句注释掉了，可以自动播放的 马黑黑 发表于 2022-2-5 20:01
这个我其实一直听不懂，有好几句我听成：
哈哈哈哈，挺好玩的。 加林森 发表于 2022-2-5 20:04
哈哈哈哈，挺好玩的。
男的唱的不错 马黑黑 发表于 2022-2-5 20:04
我把自动播放的语句注释掉了，可以自动播放的
你帮着我看看我发的帖。我用了你的代码。 马黑黑 发表于 2022-2-5 20:04
男的唱的不错
是啊，挺逗的。 加林森 发表于 2022-2-5 20:13
是啊，挺逗的。
这歌是经典情歌 马黑黑 发表于 2022-2-5 20:13
这歌是经典情歌
就是就是 小辣椒身体不太好，不过有这么好的礼物，她会飞奔而来的{:4_173:} 亲爱的，快来看纯代码的进度条@小辣椒{:4_187:} 红影 发表于 2022-2-5 21:01
小辣椒身体不太好，不过有这么好的礼物，她会飞奔而来的
{:4_181:}
这个可以控制进度的，播放的时候 红影 发表于 2022-2-5 21:02
亲爱的，快来看纯代码的进度条@小辣椒
暂停状态，控制进度也有效，点播放时会从用户的选择点开始播放 我那个帖已经修改了，老黑去看看。