公众号音乐自动播放html源码,微信浏览器中播放声音的正确姿势及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：

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，找了一边也没有合适的接口。

实在没有办法了，索性在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

如果出现该属性，则音频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

如果出现该属性，则每当音频结束时重新开始播放。

muted

规定视频输出应该被静音。

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

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

src

url

要播放的音频的 URL。

附：Media 事件

由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素，但常见于媒介元素中，比如、、、以及 ):

属性

值

描述

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

当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本