fiurt
最近這段時間都在基于微信平臺開發(fā),不得不說踩了不少坑.這篇文章就重點來說說微信與 HTML5 中的
<audio> 元素令人頭痛的問題.
<audio>在 iOS 微信端不能自動播放
一般來說我們要利用 <audio> 實現(xiàn)音頻自動播放只需要在 <audio> 標(biāo)簽上加上 autoplay 屬性.實現(xiàn)簡單的 <audio> 音頻自動播放,代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<style>
body {
margin: 0;
}
.musicPlay {
position: fixed;
width: 100vw;
top: 20vh;
}
.musicPlay>p {
width: 64vw;
margin-left: 18vw;
font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
box-shadow: 0 0 12px 0 #aaa;
height: 7vh;
line-height: 7vh;
}
.musicPlay>p>img {
float: left;
margin-left: 1vw;
height: 5vh;
margin-top: 1vh;
}
.musicPlay>p>span {
float: left;
}
</style>
</head>
<body>
<div class="musicPlay">
<audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
<p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var voice = document.getElementById('voice');
$('.musicPlay').click(function() {
// 依據(jù) audio 的 paused 屬性返回音頻是否已暫停來判斷播放還是暫停音頻。
if (voice.paused) {
voice.play();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
} else {
voice.pause();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
}
});
});
</script>
</body>
</html>
- 在 PC 端的 Chrome 瀏覽器,Edge 瀏覽器上訪問,能夠自動播放音頻.
- 在 Android 手機上使用微信和 Android 自帶瀏覽器訪問,能夠自動播放音頻.
- 在 iPhone iOS10 系統(tǒng) 手機上使用微信和 Safari 瀏覽器訪問,無法自動播放音頻.
看來在 <audio> 標(biāo)簽加上 autoplay 屬性并不能兼容所有瀏覽器.那我們再使用 js 代碼調(diào)用 <audio> 元素提供的 play() 方法試試,修改一下上面的代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<style>
body {
margin: 0;
}
.musicPlay {
position: fixed;
width: 100vw;
top: 20vh;
}
.musicPlay>p {
width: 64vw;
margin-left: 18vw;
font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
box-shadow: 0 0 12px 0 #aaa;
height: 7vh;
line-height: 7vh;
}
.musicPlay>p>img {
float: left;
margin-left: 1vw;
height: 5vh;
margin-top: 1vh;
}
.musicPlay>p>span {
float: left;
}
</style>
</head>
<body>
<div class="musicPlay">
<audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
<p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var voice = document.getElementById('voice');
//調(diào)用 <audio> 元素提供的方法 play()
voice.play();
$('.musicPlay').click(function() {
// 依據(jù) audio 的 paused 屬性返回音頻是否已暫停來判斷播放還是暫停音頻汞幢。
if (voice.paused) {
voice.play();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
} else {
voice.pause();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
}
});
});
</script>
</body>
</html>
情況和剛才一樣,這一招也行不通.
為什么在 iPhone 上就無法自動播放音頻?這是因為 iOS Safari 不允許自動播放 audio懒构，只能通過用戶交互觸發(fā).這大概是蘋果公司出于用戶體驗而做的限制.但是為什么別人的 iPhone 使用微信打開一個 H5 卻能自動播放音頻?
這就需要說到一個被騰訊和諧掉的接口 WeixinJSBridge,這里就不講為什么 WeixinJSBridge 接口會被和諧掉,反正都被和諧掉了,以后也不建議在項目中使用.但是騰訊又沒把 WeixinJSBridge 這個 API 所有功能都和諧掉，相反，有好幾個功能還是相當(dāng)有用的车酣，可以正常使用.有興趣的可以看看<<微信JSAPI>>.接下來我們就需要用到尚未被騰訊和諧掉的 WeixinJSBridge 接口來實現(xiàn)在 iPhone 手機微信端 <audio> 自動播放.
在微信內(nèi)置瀏覽器中有一個內(nèi)置的 JS 對象,這個內(nèi)置的 JS 對象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打開就有了视乐，客戶端需要初始化這個對象，當(dāng)這個對象準(zhǔn)備好的時候扳抽，客戶端會拋出事件 "WeixinJSBridgeReady"。因此殖侵，在調(diào)用 WeixinJSBridge 相關(guān) api 時贸呢，需要做好 WeixinJSBridge 存在與否的判斷.修改一下上面的代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<style>
body {
margin: 0;
}
.musicPlay {
position: fixed;
width: 100vw;
top: 20vh;
}
.musicPlay>p {
width: 64vw;
margin-left: 18vw;
font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
box-shadow: 0 0 12px 0 #aaa;
height: 7vh;
line-height: 7vh;
}
.musicPlay>p>img {
float: left;
margin-left: 1vw;
height: 5vh;
margin-top: 1vh;
}
.musicPlay>p>span {
float: left;
}
</style>
</head>
<body>
<div class="musicPlay">
<audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
<p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var voice = document.getElementById('voice');
//調(diào)用 <audio> 元素提供的方法 play()
voice.play();
//判斷 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//監(jiān)聽客戶端拋出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
$('.musicPlay').click(function() {
// 依據(jù) audio 的 paused 屬性返回音頻是否已暫停來判斷播放還是暫停音頻。
if (voice.paused) {
voice.play();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
} else {
voice.pause();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
}
});
});
</script>
</body>
</html>
- 在 PC 端的 Chrome 瀏覽器,Edge 瀏覽器上訪問,能夠自動播放音頻.
- 在 Android 手機上使用微信和 Android 自帶瀏覽器訪問,能夠自動播放音頻.
- 在 iPhone iOS10 系統(tǒng) 手機上使用微信訪問,能夠自動播放音頻.Safari 瀏覽器訪問,依然無法自動播放音頻.
上面已經(jīng)說過了這是因為 iOS Safari 不允許自動播放 audio拢军，只能通過用戶交互觸發(fā).而 Safari 瀏覽器可沒有內(nèi)置 WeixinJSBridge 接口,所以一般的做法是監(jiān)聽 touchstart 事件進而調(diào)用 <audio> 元素提供的 play() 方法播放音頻.當(dāng)然這是一個沒有辦法的辦法.修改一下上面的代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<style>
body {
margin: 0;
}
.musicPlay {
position: fixed;
width: 100vw;
top: 20vh;
}
.musicPlay>p {
width: 64vw;
margin-left: 18vw;
font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
box-shadow: 0 0 12px 0 #aaa;
height: 7vh;
line-height: 7vh;
}
.musicPlay>p>img {
float: left;
margin-left: 1vw;
height: 5vh;
margin-top: 1vh;
}
.musicPlay>p>span {
float: left;
}
</style>
</head>
<body>
<div class="musicPlay">
<audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
<p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var voice = document.getElementById('voice');
//調(diào)用 <audio> 元素提供的方法 play()
voice.play();
//判斷 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//監(jiān)聽客戶端拋出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
//voiceStatu用來記録狀態(tài),使 touchstart 事件只能觸發(fā)一次有效,避免與 click 事件衝突
var voiceStatu = true;
//監(jiān)聽 touchstart 事件進而調(diào)用 <audio> 元素提供的 play() 方法播放音頻
document.addEventListener("touchstart",function(e){
if(voiceStatu){
voice.play();
voiceStatu = false;
}
}, false);
$('.musicPlay').click(function() {
// 依據(jù) audio 的 paused 屬性返回音頻是否已暫停來判斷播放還是暫停音頻楞陷。
if (voice.paused) {
voice.play();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
} else {
voice.pause();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
}
});
});
</script>
</body>
</html>
這樣我們就能"兼容"所有瀏覽器了!
如果你想獲得這段音頻的長度（以秒計）,還可以監(jiān)聽瀏覽器能夠開始播放這段音頻時，發(fā)生的 canplay 事件來獲取 <audio> 元素的 duration 屬性. duration 屬性返回當(dāng)前音頻的長度茉唉，以秒計.如果未設(shè)置音頻,則返回 NaN.修改一下上面的代碼:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<style>
body {
margin: 0;
}
.musicPlay {
position: fixed;
width: 100vw;
top: 20vh;
}
.musicPlay>p {
width: 64vw;
margin-left: 18vw;
font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
box-shadow: 0 0 12px 0 #aaa;
height: 7vh;
line-height: 7vh;
}
.musicPlay>p>img {
float: left;
margin-left: 1vw;
height: 5vh;
margin-top: 1vh;
}
.musicPlay>p>span {
float: left;
}
.musicPlay>p>span>em {
color: #d81e06;
}
</style>
</head>
<body>
<div class="musicPlay">
<audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
<p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span><em></em>播放/暫停</span></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var voice = document.getElementById('voice');
//調(diào)用 <audio> 元素提供的方法 play()
voice.play();
//判斷 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//監(jiān)聽客戶端拋出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function() {
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function() {
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function() {
voice.play();
});
}
}
//voiceStatu用來記録狀態(tài),使 touchstart 事件只能觸發(fā)一次有效,避免與 click 事件衝突
var voiceStatu = true;
//監(jiān)聽 touchstart 事件進而調(diào)用 <audio> 元素提供的 play() 方法播放音頻
document.addEventListener("touchstart", function(e) {
if (voiceStatu) {
voice.play();
voiceStatu = false;
}
}, false);
$('.musicPlay').click(function() {
// 依據(jù) audio 的 paused 屬性返回音頻是否已暫停來判斷播放還是暫停音頻固蛾。
if (voice.paused) {
voice.play();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
} else {
voice.pause();
$('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
}
});
//監(jiān)聽瀏覽器能夠開始播放這段音頻時，發(fā)生的 canplay 事件來獲取 <audio> 元素的 duration 屬性.
$("#voice").on("canplay", function() {
$(".musicPlay>p>span>em").html(parseInt(voice.duration)+'" ');
});
});
</script>
</body>
</html>
更多有關(guān) <audio> 的信息可以參考 HTML 5 視頻/音頻參考手冊,希望能夠幫助到大家!
