解決audio標簽樣式問題及ios自動播放問題
html代碼如下，ios的audio標簽好像不支持ogg文件播放，在微信端放了ogg音頻文件，都無法播放，因此改用MP3文件。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">
<audio controls="controls" autoplay="autoplay" id="mp3Btn" style="display: none;">
<source src="resource/mp3.mp3" type="audio/mp3" />
</audio>
</pre>
設(shè)置為display:none，隱藏掉音頻組件，增加額外組件樣式，用于控制音頻的播放。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div style="width: 50px;height: 50px; position: absolute; top: 20px;right: 10px;" class="btn-audio rotateClass">
<img src="image/audio.png" style=" width: 50px;">
</div></pre>
引入了一張音符圖片，增加css3樣式，使圖片旋轉(zhuǎn)起來，增加動態(tài)效果，其中rotateclass主要控制圖片的旋轉(zhuǎn)。代碼如下
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.rotateClass{ -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
/* 設(shè)置動畫，animation:動畫名稱 動畫播放時長單位秒或微秒 動畫播放的速度曲線linear為勻速 動畫播放次數(shù)infinite為循環(huán)播放; / -webkit-animation:play 3s linear infinite; -moz-animation:play 3s linear infinite; animation:play 3s linear infinite;
} @-webkit-keyframes play{ 0% { / 水平翻轉(zhuǎn) /
/-webkit-transform:rotateY(0deg);/
/ 垂直翻轉(zhuǎn)
-webkit-transform:rotateX(0deg);
順時針旋轉(zhuǎn)
-webkit-transform:rotate(0deg);
逆時針旋轉(zhuǎn)
-webkit-transform:rotate(0deg); / -webkit-transform:rotateX(0deg);
} 100% { -webkit-transform:rotate(360deg);
/ 水平翻轉(zhuǎn) /
/-webkit-transform:rotateY(360deg);/
/ 垂直翻轉(zhuǎn)
-webkit-transform:rotateX(360deg);
順時針旋轉(zhuǎn)
-webkit-transform:rotate(360deg);
逆時針旋轉(zhuǎn)
-webkit-transform:rotate(-360deg); /
} }
@-moz-keyframes play{ 0% {
-moz-transform:rotate(0deg);
/-moz-transform:rotateY(0deg);/
/ -moz-transform:rotateX(0deg);
-moz-transform:rotate(0deg);
-moz-transform:rotate(0deg); /
} 100% { -moz-transform:rotate(360deg);
/-moz-transform:rotateY(360deg);/
/ -moz-transform:rotateX(360deg);
-moz-transform:rotate(360deg);
-moz-transform:rotate(-360deg); /
} }
@keyframes play{ 0% {
transform:rotate(0deg);
/ transform:rotateY(0deg);/
/ transform:rotateX(0deg);
transform:rotate(0deg);
transform:rotate(0deg); /
} 100% { transform:rotate(360deg);
/ transform:rotateY(360deg);/
/ transform:rotateX(360deg);
transform:rotate(360deg);
transform:rotate(-360deg); */
}</pre>
](javascript:void(0); "復(fù)制代碼")
用JS控制，當歌曲播放時，圖片自動旋轉(zhuǎn)，歌曲停止后，圖片旋轉(zhuǎn)停止。JS代碼如下：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><script type="text/javascript"> $(document).ready(function(){ //播放完畢
$('#mp3Btn').on('ended', function() {
console.log("音頻已播放完成");
$('.btn-audio').removeClass('rotateClass');
}); //播放器控制
var audio = document.getElementById('mp3Btn');
audio.volume = .3;
$('.btn-audio').click(function() {
event.stopPropagation();//防止冒泡
if(audio.paused){ //如果當前是暫停狀態(tài)
$('.btn-audio').addClass('rotateClass');
audio.play(); //播放
return;
}else{//當前是播放狀態(tài)
$('.btn-audio').removeClass('rotateClass');
audio.pause(); //暫停''
}
});
}); </script></pre>
](javascript:void(0); "復(fù)制代碼")
至此，代碼在安卓機和PC端上運行正常，但在IOS系統(tǒng)上會出現(xiàn)無法播放的情況。查閱了相關(guān)資料，需引入微信API接口，用JS控制代碼如下：
[
](javascript:void(0); "復(fù)制代碼")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript"> document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('mp3Btn').play(); // document.getElementById('video').play();
}, false); </script></pre>
](javascript:void(0); "復(fù)制代碼")
至此階段，經(jīng)測試，代碼運行正常。
