首页 新闻 会员 周边

html5在手机浏览器中的音频播放问题

0
悬赏园豆:50 [已解决问题] 解决于 2015-05-12 13:50

我想问下我使用html5的音频播放消息提示音的时候、电脑上的网页有声音、但是手机上没声音、但是我自己去测试了一下、我写了一个点击事件、就是手机点击的时候播放有声音、
var audio = new Audio('music/msg.mp3');
$(function () {
$('#muc').on('click', function () {
audio.play();
})

setTimeout(function () { $("#muc").click(); alert(audio) }, 3000);
})
用js去调用的时候没声音、但是用手点击的时候就可以、这是什么原因呢?

进阶的小范的主页 进阶的小范 | 初学一级 | 园豆:99
提问于:2015-05-06 16:20
< >
分享
最佳答案
0

改为下面的代码试试:

setTimeout(function () { audio.play(); }, 3000);
收获园豆:50
dudu | 高人七级 |园豆:30994 | 2015-05-06 16:26

不行、我试了、非得自己用手去点手机才会响、代码调用的话没反应、不知道为什么会这样、必须对手机有操作、直接用js调用audio.play();方法不行、没声音、但是电脑上可以、在手机上不行、

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:31

在网上找了很久有个人说html5里面的audio必须要与手机有交互。。。才行、不知道为毛

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:32

@fanzhengshao: 改为下面的方式播放试试:

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'music/msg.mp3');
audioElement.play();
dudu | 园豆:30994 (高人七级) | 2015-05-06 16:33

@dudu: 我组长安卓4.1的可以、我的4.4不行、但是我写个点击事件去调用播放的方法又有声音

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:39

还是不行耶

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:39

这个到底是什么原因呢?我的手机是安卓4.  我在ios上也测试了还是不行、

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:45

移动端一个audio对象的第一次播放,必须是一个用户触发的行为。 
可以给body一个点击事件,在事件里处理,点击播放 H5 的audio标签目前是这个模式

 

这是我找了好久看到的这么一句话、

 

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:52

@fanzhengshao: 这样的限制也合理,打开网页自动音频的确不好

dudu | 园豆:30994 (高人七级) | 2015-05-06 16:55

@dudu: 但是我想实现一个功能、就是有新消息的时候有声音提示。。。。。岂不是弄不了?

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:58

@fanzhengshao: 最好别弄,这不是提示用户,这是赶走用户。

dudu | 园豆:30994 (高人七级) | 2015-05-06 16:59

@dudu: 晕死、我这是做的聊天啊。。。。我做的是移动web项目、里面有个即时聊天嘛、现在就差声音提示了、而且声音提示用户可以在设置里面打开和关闭的

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 17:04

@dudu: 弄不了吗?难道只能在安卓外壳里面做动作了?这样一来人家用浏览器访问的时候岂不是又没声音了

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 17:05

@dudu: 解决不了吗?不过还是大神的指点、太谢谢了、

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 17:08

@dudu: 大神:这句话怎么理解、具体怎么操作呢?

 

这里有个问题,IOS是不能自动播放音乐的,一定要触发一个用户交互事件,例如点击。

但是有一种hack的方法可以让IOS微信侧页面自动播放(SAFARI依旧无效):

通过new一张图片,监听一张图片的onload事件,结束后回调执行音频播放audio.play()即可,原理估计是动了dom结构,相当于执行了一次交互。(有人也用过createEvent模拟,原理也是动了dom。)

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 17:11

@fanzhengshao: 试试howler.js,https://github.com/goldfire/howler.js

dudu | 园豆:30994 (高人七级) | 2015-05-06 17:11

@dudu: 不大会用、而且好像不行、不管是什么格式的音频都不行啊、就算他会自动转、现在的事情就是必须要有一次交互

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 17:27

@dudu: 用js怎么模拟交互?比如我想模拟点击了一下屏幕

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 17:27

@fanzhengshao: 试试下面的代码:

var link = document.getElementById( 'link_to_click' ),
    event = document.createEvent( 'HTMLEvents' );

event.initEvent( 'click', true, true );
link.dispatchEvent( event );

来自:http://stackoverflow.com/a/14669335

dudu | 园豆:30994 (高人七级) | 2015-05-06 17:29

@dudu: 好吧、大神、辛苦你了、感谢你不留余力的为我解答、但是还是不行、电脑上可以、在手机上就不行了、必须要我手动点击它才可以。。。我也是醉了、

进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 17:44
其他回答(2)
0

在安卓上是可以播放的,Ios上貌似手动点才能播放的。之前有同学弄过

进击的小矮人 | 园豆:316 (菜鸟二级) | 2015-05-06 16:31

我组长安卓4.1的可以、我的4.4不行、但是我写个点击事件去调用播放的方法又有声音

支持(0) 反对(0) 进阶的小范 | 园豆:99 (初学一级) | 2015-05-06 16:39
0

搞不掂啊、如何在手机上消息声音提醒呢?

进阶的小范 | 园豆:99 (初学一级) | 2015-05-12 13:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册