HTML网页插入背景音乐播放按钮代码

    选择打赏方式

微信公众号伊伊兔Yi-Yi-Tu,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

一个非常简单的控制背景音乐播放代码,其实就是就是加了张图片做控制按钮。

效果看这里:www.zcjun.com/admin

QQ截图20180611233651.jpgQQ截图20180611233700.jpg

两张图片默认名为pause.png和play.png(自己找图吧,少年郎)布局也自己看页面自行操刀吧

HTML

放置<audio>标签,设置音频文件源,设置循环播放。

准备两张图片,分别表示开启和暂停背景音乐两种状态,可以点击。

代码如下:

        <audio id="music" src="music.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签(づ╥﹏╥)づ。</audio>
		<a id="audio_btn"><img src="play.png" width="48" height="50" id="music_btn" border="0"></a>

Javascript

我们在点击开关图片按钮的时候调用了javascript脚本,playPause()函数。函数中判断audio音频播放状态,如果已经停止(paused)则调用.play()继续播放,如果是在播放状态,则立即暂停播放.pause(),两种状态切换时及时更新按钮图片。

请看代码:

<script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
<script>
$("#audio_btn").click(function(){
	var music = document.getElementById("music");
	if(music.paused){
		music.play();
		$("#music_btn").attr("src","play.png");
	}else{
		music.pause();
		$("#music_btn").attr("src","pause.png");
	}
});

function playPause() {
    var music = document.getElementById('music2');
    var music_btn = document.getElementById('music_btn2');
    if (music.paused){
        music.play();
        music_btn.src = 'play.png';
    }
    else{
        music.pause();
        music_btn.src = 'pause.png'; 
    }
}
</script>     

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:HTML网页插入背景音乐播放按钮代码 https://www.zcjun.com/yuanma/92.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!