mishe / blog

前端碰上的问题或体会
230 stars 39 forks source link

webview 中无法播放audio的MP3 #159

Open mishe opened 7 years ago

mishe commented 7 years ago

// 问题来由:公司小伙伴制作最近的一个活动页面,通过手机的摇一摇事件,然后调取接口展示结果,同时播放一段MP3;

html 页面代码:

<audio id="Music" src="<%= $.getStaticOrgin()%>/yaowang/dist/music.mp3" style="display: none;"></audio>

JavaScript 代码:

audio = document.getElementById("Music"),
audio.play();

在chrome模拟器和手机端浏览器及微信中,都可以正常的工作,正常的播放MP3

但页面内嵌app的webview中后,MP3并没有声音出现;

解决方案

搜索百度google并没有发现现成解决方案;

但也有所启发,似乎只要给audio标签增加controls属性,让audio控制器显示在页面中,然后可以被手工点击播放。

然后的操作就是给audio绑定click事件,但摇一摇触发后,js通过trigger 触发audio的click

mishe commented 7 years ago

大前提是webview 把mediaPlaybackRequiresUserAction 设置为false

http://fqk.io/issues-of-audio-video-in-webview/