jquery,js-按钮控制音乐播放

最新推荐文章于 2024-01-25 12:30:01 发布

lady_killer9

最新推荐文章于 2024-01-25 12:30:01 发布

阅读量1.3w

点赞数 2

本文链接：https://blog.csdn.net/lady_killer9/article/details/78287666

版权

实现点击按钮控制音乐的播放和暂停。默认为播放，若想默认不播放，修改audio的autoplay属性即可。

音乐,jquery.js及按钮的背景图片均为网上链接，你也可以下载到本地。

代码：

<html>

<head>
    <title>按钮控制播放音乐</title>
     <script src="http://wuover.qiniudn.com/jquery.js"></script>
</head>
<style type="text/css">
    .pause {background-position: 0 bottom;}
    .mscBtn {height: 50px;
    background: #fff url(http://cctv2.qiniudn.com/musicbtn.png) no-repeat;
    display: block;}
</style>
<script type="text/javascript">
$(function(){
    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");}});
    });
</script>
<body>
    <a class="mscBtn" id="audioBtn" style="cursor:pointer;"></a>
    <audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay"></audio>
</body>

<html>

效果截图:

jquery.js下载截图：

按钮图片下载截图：

音乐下载截图：

本文主要代码由所附链接提供，我进行整合，仅供学习使用。

有问题请下方评论，转载请注明出处，并附有原文链接，谢谢！如有侵权，请及时联系。

主要代码来源：http://www.mizuiren.com/327.html

lady_killer9

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery,js-按钮控制音乐播放

实现点击按钮控制音乐的播放和暂停。默认为播放，若想默认不播放，修改audio的autoplay属性即可。音乐,jquery.js及按钮的背景图片均为网上链接，你也可以下载到本地。代码：按钮控制播放音乐 .pause {background-position: 0 bottom;} .mscBtn {height:
复制链接

扫一扫