其實(shí)不止是蘋果手機(jī)safari瀏覽器會(huì)播放失敗，谷歌，QQ等也會(huì)，但夸克好像不存在這個(gè)問題，這是瀏覽器出于對(duì)用戶的一種保護(hù)，禁止一進(jìn)入頁面就播放聲音，必須用戶先與頁面交互，才能播放。如果JS有用戶未交互直接播放音樂的行為，那么后面即使用戶有了交互行為，play()方法好像也都會(huì)失效，解決辦法就是讓用戶自己去觸發(fā)。我做了兩種場(chǎng)景的音頻播放。

1，一進(jìn)入頁面，直接播放音樂，沒有音頻控制條，相當(dāng)于背景音樂。

2，對(duì)話聊天，來消息時(shí)的提示音。

第一種場(chǎng)景解決辦法，添加touchstart事件，用戶一觸發(fā)事件就使用play()播放，

? document.addEventListener('touchstart',()=>{

? ? ? ? document.getElementById('music').play()

? ? })

對(duì)于動(dòng)態(tài)添加音樂標(biāo)簽的，應(yīng)該也適用。

第二種場(chǎng)景解決辦法，同樣添加touchstart事件，用戶一觸發(fā)事件就使用play()播放，但是是消息提示音，所以不能一進(jìn)來就放出聲音，要及時(shí)暫停。

?document.addEventListener('touchstart',()=>{

? ? ? ? document.getElementById('noticeMusic').play()

? ? ? ? ? ? let timer = setTimeout(()=>{

? ? ? ? ? ? ? ? document.getElementById('noticeMusic').pause()

? ? ? ? ? ? ? ? clearTimeout(timer)

? ? ? ? ? ? },1)

??})

后續(xù)繼續(xù)使用play()就能播放成功了。

對(duì)于PC端瀏覽器，一般自動(dòng)播放沒問題，即使用戶沒有交互，不一般的情況就是瀏覽器對(duì)該網(wǎng)頁的聲音播放做了限制，對(duì)于谷歌瀏覽器，目前就是三個(gè)選項(xiàng)，自動(dòng)，允許，靜音，這是用戶可以自己設(shè)置的。自動(dòng)，就是用戶有了交互行為，才可以播放音頻。允許，就是一般情況。靜音，放了，但沒完全放，沒聲。手機(jī)端瀏覽器沒得設(shè)置聲音這些玩意兒，都是默認(rèn)值，所以不能自動(dòng)播放。