サファリオーディオ再生

問題の説明：
再生ボタンをクリックします（自動再生、ユーザーの行動がありません）はオーディオの音を発見しました。

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>
	</>
}

私たちは、宣言の文言の典型的なオーディオ再生/一時停止、その結果、クリック、ステータスの変更、その後、状態変化の後にそれを見ることができます。

しかし、ここでサファリが直接提供し、ユーザの行動がなければなりません直接の原因オーディオ再生の仕事。これは明らかにユーザーの行動の直接の結果ではない、動作が状態リードの変化の直接の結果は、一時停止、およびオーディオの再生や一時停止につながった状態を変更するために一時停止されています。

以下のようにコードを変更します。

import React, { useRef } from 'react'

function comp() {
	let audioDom = useRef(null)
	
	function toggleAudio() {
		if (audioDom.current.paused) audioDom.current.play()
		else audioDom.current.pause()
		else audioDom.current.play()
	}

	return <>
		<audio ref={audioDom} src="xxx" />
		<span onClick={() => setPaused(toggleAudio}>点击播放</span>
	</>
}

要約：

サファリオーディオプレーヤーは、ユーザーの行動を必要と直接仕事を制御します。