[js实例] js控制audio背景音乐

来源：互联网发布：网页淘宝分享到微信编辑：程序博客网时间：2024/06/19 02:20

首先构建html代码：（记得一定要给audio标签增加src属性，否则在微信里不能播放）

<!--音乐开始--><audio id="music" autoplay="autoplay" loop="loop" preload="preload" src="images/music.mp3"></audio><a id="switch" class="music-on"></a><!--音乐结束-->

然后写上js代码

function MusicPlayer() {    //定义变量music为音频播放控件ID    var music=document.getElementById("music");    //定义变量music_button为播放图标按钮ID    var music_button=document.getElementById("switch");    //定义变量status作为当前播放状态并赋值    var status=1;    //使音频默认自动播放    music.play();    music_button.className="music-on";    //设置按钮点击事件    music_button.onclick=function(){        if (status > 0) {            music.pause();            this.className="music-off";             status = 0;        }        else {            music.play();            this.className="music-on";             status = 1;        }    };}

建议在页面资源文件全部加载完成之后再播放，即放入window.onload事件中，例如像下面这样：

<script>window.onload = function(){  MusicPlayer();}</script>

css样式部分

#switch { display:block; position:absolute; right:1rem; top:1rem; z-index:10; width:3rem; height:3rem;}.music-on { background:url(../images/icon-music.png) no-repeat; background-size:100% 100%; animation:ani-music 3s linear infinite; -webkit-animation:ani-music 3s linear infinite;}.music-off { background:url(../images/icon-music-off.png) no-repeat; background-size:100% 100%;}@-webkit-keyframes ani-music{    0% { -webkit-transform:rotate(0deg);}    100% { -webkit-transform:rotate(360deg);}}@keyframes ani-music{    0% { transform:rotate(0deg);}    100% { transform:rotate(360deg);}}

1 0