html js 如何控制音乐打开和关闭
展开全部
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现。
首先在网页中嵌入背景音乐,html5代码为:
<a class="mscBtn" id="audioBtn" style="cursor:pointer;"></a>
<audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop"></audio>
通过audio的id即可控制音乐的播放(play())和暂停(pause()),同时通过改变class改变按钮的背景图片,js代码为(前提是要引入jq):
var music = document.getElementById("bgMusic");
$("#audioBtn").click(function(){
if(music.paused){music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{music.pause();
$("#audioBtn").removeClass("play").addClass("pause");}});
css样式为:
.pause {background-position: 0 bottom;}
.mscBtn {height: 50px;
background: #fff url(http://cctv2.qiniudn.com/musicBtn.gif) no-repeat;
display: block;}
首先在网页中嵌入背景音乐,html5代码为:
<a class="mscBtn" id="audioBtn" style="cursor:pointer;"></a>
<audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop"></audio>
通过audio的id即可控制音乐的播放(play())和暂停(pause()),同时通过改变class改变按钮的背景图片,js代码为(前提是要引入jq):
var music = document.getElementById("bgMusic");
$("#audioBtn").click(function(){
if(music.paused){music.play();
$("#audioBtn").removeClass("pause").addClass("play");
}else{music.pause();
$("#audioBtn").removeClass("play").addClass("pause");}});
css样式为:
.pause {background-position: 0 bottom;}
.mscBtn {height: 50px;
background: #fff url(http://cctv2.qiniudn.com/musicBtn.gif) no-repeat;
display: block;}
微测检测5.10
2023-05-10 广告
2023-05-10 广告
您好!建议咨 深圳市微测检测有限公司,已建立起十余个专业实验室,企业通过微测检测就可以获得一站式的测试与认 证解决方案;(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量),认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询