团长 发表于 2021-12-27 20:49
队长今晚来了没有
呀，团长真的来了
本帖最后由 加林森 于 2022-2-6 13:55 编辑 <br /><br />团长 发表于 2021-12-27 20:49
队长今晚来了没有
在的啊，我才发了歌曲上来啊！
<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/61ff4c8f2ab3f51d916acd77.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/88521.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-25 22:14
来了来来，刚才去洗漱了。
人呢~~
杨柳青 发表于 2021-12-27 21:37
人呢~~
在的
加林森 发表于 2021-12-27 21:40
在的
{:4_173:}
杨柳青 发表于 2021-12-27 21:53
真乖！{:4_190:}
加林森 发表于 2021-12-27 21:54
真乖！
{:4_172:}
杨柳青 发表于 2021-12-27 21:55
去报到没有啊？
加林森 发表于 2021-12-27 21:56
去报到没有啊？
报道~~{:5_115:}
杨柳青 发表于 2021-12-27 21:59
报道~~
搞活动啊
睡觉了{:5_110:}