safari 音頻播放問題

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

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中音頻的播放需要用戶行爲直接控制纔行。