問題描述：
點擊播放音頻按鈕發現并沒有聲音（并不是自動播放，是有用戶行為的）。

import React, { useEffect, useState, useRef } from 'react'function comp() {let [paused, setPaused] = useState(true)let audioDom = useRef(null)useEffect(() => {if (paused) audioDom.current.pause()else audioDom.current.play()}, [paused])return <><audio ref={audioDom} src="xxx" /><span onClick={() => setPaused(_paused => !_paused)}>點擊播放</span></> }

可以看到我們是點擊之后，狀態改變，然后狀態改變，導致音頻播放/暫停，這是典型的聲明式寫法。

但是這里safari直接規定了，必須要用戶行為直接導致音頻播放才行。這里顯然不是用戶行為直接的結果，行為直接的結果是導致paused狀態的改變，而paused狀態的改變才導致音頻的播放或者暫停。

所以修改代碼如下：

import React, { useRef } from 'react'function comp() {let audioDom = useRef(null)function toggleAudio() {if (audioDom.current.paused) audioDom.current.play()else audioDom.current.pause()}return <><audio ref={audioDom} src="xxx" /><span onClick={() => setPaused(toggleAudio}>點擊播放</span></> }

總結：

safari中音頻的播放需要用戶行為直接控制才行。

總結

以上是生活随笔為你收集整理的safari 音频播放问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。