您的位置：首页 > 移动开发 > 微信开发

[HTML]音乐自动播放（兼容微信）

2017-05-24 16:04 375 查看
文件下载：音乐自动播放（兼容微信）.zip

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
#play_btn {
position: absolute;
right: 6%;
top: 6%;
width: 24px;
height: 24px;
overflow: hidden;
background-color: #000;
border: solid 3px #ccc;
border-radius: 50%;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

#play_btn button {
display: inline-block;
width: 24px;
height: 24px;
background-image: url(music.png);
background-repeat: no-repeat;
background-position: center;
background-size: 45%;
background-color: transparent;
border: none;
}

#play_btn audio {
width: 0px;
height: 0px;
overflow: hidden;
visibility: hidden;
}

#play_btn.play {
-webkit-animation: play 3s linear infinite;
-moz-animation: play 3s linear infinite;
-ms-animation: play 3s linear infinite;
animation: play 3s linear infinite;
}

#play_btn.pause {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}

@keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@-moz-keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@-webkit-keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@-ms-keyframes play {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>

<body>
<div id="play_btn">
<button type="button"></button>
<audio src="Hebe-A_little_happiness.aac" loop preload></audio>
</div>
<script>
/*
touchstart,DOMContentLoaded无法在jQuery.ready里执行监听操作
*/
function autoPlay() {
/* 自动播放音乐效果，解决浏览器或者APP自动播放问题 */
function musicInBrowserHandler() {
audioToggle(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);

/* 自动播放音乐效果，解决微信自动播放问题 */
function musicInWeixinHandler() {
audioToggle(true);
document.addEventListener('WeixinJSBridgeReady', function() {
audioToggle(true);
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
audioToggle(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
autoPlay();

// ====================================================

function audioToggle(isPlay) {
var playBtn = document.getElementById('play_btn');
var audio = playBtn.getElementsByTagName('audio')[0];

if (typeof(isPlay) == 'undefined') {
isPlay = !!audio.paused;
}

var space = String.fromCharCode(32); // 空格
var playBtnClass = space + (playBtn.getAttribute('class') || (isPlay ? 'play' : 'pause')) + space;
if (isPlay) {
playBtnClass = playBtnClass.replace(space + 'pause' + space, space + 'play' + space);
audio.play();
} else {
playBtnClass = playBtnClass.replace(space + 'play' + space, space + 'pause' + space);
audio.pause();
}
playBtn.className = playBtnClass.replace(/(^\s*)|(\s*$)/g, '');
}

document.getElementById('play_btn').onclick = function() {
audioToggle();
}
</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航