《思君》 邓丽君
<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>
《思君》歌词
演唱：邓丽君
我住长江头君住长江尾日日思君不见君共饮长江水我住长江头君住长江尾日日思君不见君共饮长江水此水几时休呀此恨何时已只愿君心似我心定不负相思意此水几时休呀此恨何时已只愿君心似我心定不负相思意此水几时休呀此恨何时已只愿君心似我心定不负相思意此水几时休呀此恨何时已只愿君心似我心定不负相思意此水几时休呀此恨何时已只愿君心似我心定不负相思意
非常经典，队长好分享 ，真棒！
{:4_204:}{:4_190:}{:4_179:} 大猫咪 发表于 2022-2-6 13:04
非常经典，队长好分享 ，真棒！
谢谢猫猫支持。{:4_190:}{:4_179:} 恭喜队长做成功了{:4_187:} 红影 发表于 2022-2-6 13:57
恭喜队长做成功了
是的啊，都是老黑教的好，我就跟着学习再制作出来看效果，结果很满意的。 队长这个速度这么快啊，我刚看见黑黑那边教程，这里出来了{:4_178:} 小辣椒 发表于 2022-2-6 15:44
队长这个速度这么快啊，我刚看见黑黑那边教程，这里出来了
这个是重新制作的，也是在复习，增加记忆的。 加林森 发表于 2022-2-6 14:01
是的啊，都是老黑教的好，我就跟着学习再制作出来看效果，结果很满意的。
嗯嗯，黑黑太厉害了，代码之王{:4_173:} 红影 发表于 2022-2-6 18:57
嗯嗯，黑黑太厉害了，代码之王
应该是的。真厉害！ 加林森 发表于 2022-2-6 19:22
应该是的。真厉害！
这么多放音乐的方式，够我们玩很长时间了{:4_173:} 红影 发表于 2022-2-6 22:11
这么多放音乐的方式，够我们玩很长时间了
就是，老黑的代码真多啊。{:4_189:} 加林森 发表于 2022-2-7 08:35
就是，老黑的代码真多啊。
都是他自己做出来的，很不容易的。 红影 发表于 2022-2-7 15:02
都是他自己做出来的，很不容易的。
是的，所以他是老师我们是学生吧。{:4_189:} 加林森 发表于 2022-2-7 15:09
是的，所以他是老师我们是学生吧。
我们是不太合格的学生呢，学习得不够努力，不知道黑黑老师会不会头疼{:4_173:} 红影 发表于 2022-2-7 15:22
我们是不太合格的学生呢，学习得不够努力，不知道黑黑老师会不会头疼
把他整得头疼是好事，他会喜欢的。{:4_170:} 加林森 发表于 2022-2-7 15:33
把他整得头疼是好事，他会喜欢的。
那不行，万一他一赌气不教了咋办{:4_173:} 红影 发表于 2022-2-7 16:27
那不行，万一他一赌气不教了咋办
老黑不会的，他对人很好的。我们是老朋友了，我知道他的。 图片上加播放器~~{:5_116:} 杨柳青 发表于 2022-2-7 19:28
图片上加播放器~~
{:4_428:}