您的位置:首页 » 分类: JavaScript & HTML5+CSS3 » 文章: 微信浏览器中播放声音的正确姿势及html5中的audio标签

微信浏览器中播放声音的正确姿势及html5中的audio标签

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

标榜的正确姿势似乎还是不对。

状态是

wx.config({
// 配置信息
});
wx.ready(function () {
media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
media.play();
});

代码放在一起是可以的,代码分开,或调用别的JS SDK,就不行了。
测试了很久,始终无法实现。想起了以前的WeixinJSBridge,测试了一下,竟然成了。

var media = document.getElementById("musicBox");
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
// 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
// alert(res.err_msg);
media.play();
});
}

前端就是这么蛋碎。
===========以上内容2016年4月15日===========

在实际项目中需要在微信浏览器中播放声音。所以学习了一下html5中播放声音的一些相关知识。iOS Safari 不允许自动播放 audio,只能通过用户交互触发。

了解了基本的声音播放的属性和时间,开始写代码,比如html:

<audio style="display:none" id="musicBox" preload="metadata" controls autoplay="false"></audio>

js代码:

var media = document.getElementById("musicBox");
if (!media.src) {
media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
}
media.play();

在pc浏览器下能正常播放,但是在微信页面中不行。尝试了好多姿势,就是播放不了声音。 想起了微信的JS SDK,找了一边也没有合适的接口。

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

实在没有办法了,索性在wx.ready(function () {...});中尝试了一下,结果成了!估计是微信浏览器做了一些特殊处理。

wx.config({
// 配置信息
});
wx.ready(function () {
media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
media.play();
});

附:audio标签及属性

认真学习了一下html5重点audio标签及属性:

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 “autoplay”,则忽略该属性。

src url 要播放的音频的 URL。

附:Media 事件

由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):

属性 描述
onabort script 在退出时运行的脚本。
oncanplay script 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange script 当媒介长度改变时运行的脚本。
onemptied script 当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。
onended script 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
onerror script 当在文件加载期间发生错误时运行的脚本。
onloadeddata script 当媒介数据已加载时运行的脚本。
onloadedmetadata script 当元数据(比如分辨率和时长)被加载时运行的脚本。
onloadstart script 在文件开始加载且未实际加载任何数据前运行的脚本。
onpause script 当媒介被用户或程序暂停时运行的脚本。
onplay script 当媒介已就绪可以开始播放时运行的脚本。
onplaying script 当媒介已开始播放时运行的脚本。
onprogress script 当浏览器正在获取媒介数据时运行的脚本。
onratechange script 每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。
onreadystatechange script 每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。
onseeked script 当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。
onseeking script 当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。
onstalled script 在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend script 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate script 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onvolumechange script 每当音量改变时(包括将音量设置为静音)时运行的脚本。
onwaiting script 当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

2 条评论 - 关于 “微信浏览器中播放声音的正确姿势及html5中的audio标签

  1. 请问大神,这种自动播放适用于开启页面时自动播放的音乐,如果是在操作过程中不是通过用户触摸而触发的音效呢?该如何才能才能播放出来?

    1. @zhaoshu ar media = document.getElementById(“musicBox”);
      if (typeof WeixinJSBridge == “object” && typeof WeixinJSBridge.invoke == “function”) {
      WeixinJSBridge.invoke(‘getNetworkType’, {}, function (res) {
      // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
      // alert(res.err_msg);
      media.play();
      });
      }

发表评论

电子邮件地址不会被公开。 必填项已用*标注