《农夫渔夫》 大乔小乔 送大家！
<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>
《农夫渔夫》填 词：小猛谱 曲：小猛歌曲原唱：大乔，小乔如果有一天我能够拥有一个大果园，我愿放下所有追求做个农夫去种田，每一个早晨我耕耘在绿野田园，每一个黄昏我守望在乡间的麦田。我会把忧虑都融化在夕阳里，让孤独的心等待秋收的欢喜。哦，如果那个时候我身边没有女朋友，我不介意谁会来给我一个周末的问候，哦，如果那个时候我依然牵着她的手，我们会幸福地坐上树枝头。如果有一天我能够拥有一条渔船，我愿放下所有执着做个渔夫住在海边，每一个早晨我航行在晨曦的海面，每一个黄昏我遥望在无际的海云间。我会把思绪都消失在波涛里，让澎湃的心等待风雨后的平息。哦，如果那个时候我身边没有女朋友，我不介意谁会来给我一个周末的问候；哦，如果那个时候我依然牵着她的手，我们会幸福地坐上弯弯船头。哦，如果那个时候我身边没有女朋友，我不介意谁会来给我一个周末的问候；哦，如果那个时候我依然牵着她的手，我们会幸福地坐上弯弯船头。我们会停泊在爱人的码头。
大小乔都会弹吉他了，腿还辣妈白 马黑黑 发表于 2022-2-9 19:26
大小乔都会弹吉他了，腿还辣妈白
哈哈，老黑观察仔细得很啦。 有趣的歌曲，还是头一次听到呢{:4_187:} 红影 发表于 2022-2-9 20:45
有趣的歌曲，还是头一次听到呢
好听吧。{:4_172:} 马黑黑 发表于 2022-2-9 19:26
大小乔都会弹吉他了，腿还辣妈白
这个播发器加分后会自动另外的播放，让不同播放进度的歌曲混在一起？我这会用的谷歌浏览器。 马黑黑 发表于 2022-2-9 19:26
大小乔都会弹吉他了，腿还辣妈白
关闭网页后可以自动打开，但刷新不自动播放，要鼠标点过，然后再点才会播放。 红影 发表于 2022-2-9 20:49
关闭网页后可以自动打开，但刷新不自动播放，要鼠标点过，然后再点才会播放。
知道了，都是腿太白的原因{:4_170:} 红影 发表于 2022-2-9 20:48
这个播发器加分后会自动另外的播放，让不同播放进度的歌曲混在一起？我这会用的谷歌浏览器。
所有的浏览器都一样的 加林森 发表于 2022-2-9 19:29
哈哈，老黑观察仔细得很啦。
{:4_170:} 马黑黑 发表于 2022-2-9 21:29
说得了吧。{:4_189:} 加林森 发表于 2022-2-9 20:46
好听吧。
是的，很好听，喜欢的嗓音。 马黑黑 发表于 2022-2-9 21:27
知道了，都是腿太白的原因
黑黑光去注意大白腿了{:4_189:} 红影 发表于 2022-2-10 16:47
黑黑光去注意大白腿了
这个吸睛{:5_106:} 红影 发表于 2022-2-10 16:46
是的，很好听，喜欢的嗓音。
就是。 马黑黑 发表于 2022-2-10 16:50
这个吸睛
你的代码能让她把腿收起来，也能让她转圈圈{:4_173:} 加林森 发表于 2022-2-10 18:00
就是。
{:4_204:} 红影 发表于 2022-2-10 18:43
红影晚上好！{:4_187:} 加林森 发表于 2022-2-10 19:07
红影晚上好！
队长晚上好{:4_204:}