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中音频的播放需要用户行为直接控制才行。