<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>微信中自动播放音乐</title> <style> body{ background:#ddd; } .music_control { display: block; height: 50px; width: 50px; position: absolute; right: 0px; top: 0px; -webkit-tap-highlight-color: rgba(0,0,0,0); } .play_btn { display: block; height: 16px; width: 16px; position: absolute; left: 17px; top: 17px; background: url(sound.png) no-repeat 0 0; background-size: contain; -webkit-animation: a_music_play 3s linear infinite; } .stop_btn { display: none; height: 16px; width: 16px; position: absolute; left: 17px; top: 17px; background: url(sound_muted.png) no-repeat 0 0; background-size: contain; } @-webkit-keyframes a_music_play{ 0%{ -webkit-transform: rotate(0deg);} 100%{ -webkit-transform: rotate(360deg);} } </style> </head> <body> <div class="audio_wrap"> <div class="music_control"> <span class="play_btn"></span> <span class="stop_btn"></span> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> function load_ready(){ audio_array[0].play(); audio_array[0].loop=true; } /*声音脚本 开始*/ //音频标签存放数组 var audio_array=[]; function loadSound(){ var audio_num=0; //获得json中图片的地址 var audio = document.createElement("audio"); audio.src = "m.mp3";//地址 audio.className="bg_music"; audio_array.push(audio); $(".audio_wrap").append(audio); audio_array[0].load(); audio_array[0].addEventListener("canplaythrough", function(){ load_ready(); }); } var play=1; $(".music_control").click(function(){ if(play==1){ $(".play_btn").hide(); $(".stop_btn").show(); audio_array[0].pause(); play=0; }else{ $(".stop_btn").hide(); $(".play_btn").show(); audio_array[0].play() play=1; } }); /*声音脚本 结束*/ loadSound(); </script> </body> </html>
所要资源