最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信浏览器中播放声音的正确姿势及html5中的audio标签
时间:2022-06-25 18:13:15 编辑:袖梨 来源:一聚教程网
标榜的正确姿势似乎还是不对。
状态是
wx.config({
// 配置信息
});
wx.ready(function () {
media.src = "/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 = "/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标签及属性:
附: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 | 当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本 |
相关文章
- 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
- 无期迷途主线前瞻兑换码是什么 11-22
- 原神欧洛伦怎么培养 11-22
- 炉石传说网易云音乐联动怎么玩 11-22
- 永劫无间手游确幸转盘怎么样 11-22
- 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22