问题场景
组件
wxml
<audio src="http://music.163.com/song/media/outer/url?id={
{musicId}}.mp3" action="{
{action}}"></audio>
ts
data: {
action: {method: 'play'},
},
控制台
[渲染层错误] Uncaught (in promise) [object DOMException](env: Windows,mp,1.06.2209190; lib: 2.25.4)
[渲染层错误] AbortError: SystemError (webviewScriptError)
The play() request was interrupted by a new load request.
原因分析
一开始以为现在移除了audio组件的action属性,因为在官方文档中找不到这个属性,后来发现不是
获取src中链接的资源需要一定时间,如果一开始就在data中设置好了action方法就会出现页面加载的瞬间就渲染页面从而来不及渲染的问题
解决方法
把data中的action设为空,
data: {
action: {},
},
再在合适的位置用setDtat,基本就能解决了
this.setData({ action: { method: 'play' } })
如果还不行就用setTimeout语句
setTimeout(() => {
this.setData({ action: { method: 'play' } })
}, 500)