本帖最后由 加林森 于 2022-2-9 16:46 编辑 <br /><br />小辣椒 发表于 2021-12-21 19:56
你问问黑黑吧
嗯嗯
<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>
<!-- 图片总要包装一下，比如做背景图；即使发裸图，对并行元素的定位功夫也要到位 -->
<div style="margin:auto; width:720px; height:480px;background: url('https://pic.imgdb.cn/item/62037c9a2ab3f51d91177e90.jpg') no-repeat center/cover;">
<!-- 播放器代码开始 -->
<div id="mainBox" style="left:10px; top:10px;">
<input id="mbtn" type="button" value="播放" />
<input id="bar" type="range" value="0" />
<div id="per"></div>
</div>
<!-- 播放器HTML代码结束 -->
</div>
<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 ='https://www.joy127.com/url/88576.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>
小辣椒 发表于 2021-12-21 19:56
你问问黑黑吧
我现在已经知道了，谢谢你们啊！
加林森 发表于 2021-12-21 20:01
我现在已经知道了，谢谢你们啊！
不用谢我啊，黑黑和我发帖是2种方法，你这个必须要问黑黑，因为这种发帖我不会
小辣椒 发表于 2021-12-21 20:04
不用谢我啊，黑黑和我发帖是2种方法，你这个必须要问黑黑，因为这种发帖我不会
我现在已经改了的。
加林森 发表于 2021-12-21 20:08
我现在已经改了的。
还是不能加分的
小辣椒 发表于 2021-12-21 20:13
还是不能加分的
可以加分了
加林森 发表于 2021-12-21 16:53
是的，声音很好听。
人也长得好看，特别是三围{:4_170:}
樵歌 发表于 2021-12-22 08:22
人也长得好看，特别是三围
呵呵，你就看这些啊？{:4_189:}
加林森 发表于 2021-12-22 17:34
呵呵，你就看这些啊？
长眼睛就是来看的何况是美女。嘿嘿。{:4_170:}
樵歌 发表于 2021-12-22 19:55
长眼睛就是来看的何况是美女。嘿嘿。
哈哈哈哈，好像说得有点道理啊。
加林森 发表于 2021-12-22 19:57
哈哈哈哈，好像说得有点道理啊。
别男人不色，千刀万剐。{:4_170:}
樵歌 发表于 2021-12-22 20:35
别男人不色，千刀万剐。
哈哈，好家伙在这里等着啦。
加林森 发表于 2021-12-22 20:36
哈哈，好家伙在这里等着啦。
没说错吧。{:4_174:}
樵歌 发表于 2021-12-23 13:25
没说错吧。
是的是的，老大就是老大。{:4_189:}