HTML5 audio 微信中自动播放音乐

<!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>

所要资源HTML5 audio 微信中自动播放音乐

HTML5 audio 微信中自动播放音乐

上一篇:JAVA实战教程_JAVA案例开发之JAVA开发微信二维码大数据系统01


下一篇:微信开发-微信内置浏览器的Javascript API