fiurt
最近这段时间都在基于微信平台开发,不得不说踩了不少坑.这篇文章就重点来说说微信与 HTML5 中的
<audio> 元素令人头痛的问题.
<audio>在 iOS 微信端不能自动播放
一般来说我们要利用 <audio> 实现音频自动播放只需要在 <audio> 标签上加上 autoplay 属性.实现简单的 <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() {
// 依據 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 系统 手机上使用微信和 Safari 浏览器访问,无法自动播放音频.
看来在 <audio> 标签加上 autoplay 属性并不能兼容所有浏览器.那我们再使用 js 代码调用 <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');
//调用 <audio> 元素提供的方法 play()
voice.play();
$('.musicPlay').click(function() {
// 依據 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，只能通过用户交互触发.这大概是苹果公司出于用户体验而做的限制.但是为什么别人的 iPhone 使用微信打开一个 H5 却能自动播放音频?
这就需要说到一个被腾讯和谐掉的接口 WeixinJSBridge,这里就不讲为什么 WeixinJSBridge 接口会被和谐掉,反正都被和谐掉了,以后也不建议在项目中使用.但是腾讯又没把 WeixinJSBridge 这个 API 所有功能都和谐掉，相反，有好几个功能还是相当有用的，可以正常使用.有兴趣的可以看看<<微信JSAPI>>.接下来我们就需要用到尚未被腾讯和谐掉的 WeixinJSBridge 接口来实现在 iPhone 手机微信端 <audio> 自动播放.
在微信内置浏览器中有一个内置的 JS 对象,这个内置的 JS 对象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件 "WeixinJSBridgeReady"。因此，在调用 WeixinJSBridge 相关 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');
//调用 <audio> 元素提供的方法 play()
voice.play();
//判斷 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//監聽客户端抛出事件"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() {
// 依據 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 系统 手机上使用微信访问,能够自动播放音频.Safari 浏览器访问,依然无法自动播放音频.
上面已经说过了这是因为 iOS Safari 不允许自动播放 audio，只能通过用户交互触发.而 Safari 浏览器可没有内置 WeixinJSBridge 接口,所以一般的做法是监听 touchstart 事件进而调用 <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');
//调用 <audio> 元素提供的方法 play()
voice.play();
//判斷 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//監聽客户端抛出事件"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用來記録狀態,使 touchstart 事件只能觸發一次有效,避免與 click 事件衝突
var voiceStatu = true;
//监听 touchstart 事件进而调用 <audio> 元素提供的 play() 方法播放音频
document.addEventListener("touchstart",function(e){
if(voiceStatu){
voice.play();
voiceStatu = false;
}
}, false);
$('.musicPlay').click(function() {
// 依據 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>
这样我们就能"兼容"所有浏览器了!
如果你想获得这段音频的长度（以秒计）,还可以监听浏览器能够开始播放这段音频时，发生的 canplay 事件来获取 <audio> 元素的 duration 属性. duration 属性返回当前音频的长度，以秒计.如果未设置音频,则返回 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');
//调用 <audio> 元素提供的方法 play()
voice.play();
//判斷 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//監聽客户端抛出事件"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用來記録狀態,使 touchstart 事件只能觸發一次有效,避免與 click 事件衝突
var voiceStatu = true;
//监听 touchstart 事件进而调用 <audio> 元素提供的 play() 方法播放音频
document.addEventListener("touchstart", function(e) {
if (voiceStatu) {
voice.play();
voiceStatu = false;
}
}, false);
$('.musicPlay').click(function() {
// 依據 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');
}
});
//监听浏览器能够开始播放这段音频时，发生的 canplay 事件来获取 <audio> 元素的 duration 属性.
$("#voice").on("canplay", function() {
$(".musicPlay>p>span>em").html(parseInt(voice.duration)+'" ');
});
});
</script>
</body>
</html>
更多有关 <audio> 的信息可以参考 HTML 5 视频/音频参考手册,希望能够帮助到大家!
