使用 .play() 在 Safari 中播放音频

Question

我希望使用自定义控件来播放音频文件，以触发自定义按钮上的 .play() 方法。需要明确的是，我并不是想让音频自动播放。在 Chrome 中一切正常，但在 Safari 中出现错误：

未处理的承诺拒绝：NotAllowedError：当前上下文中的用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

该项目是使用 React 和 React Router 构建的，所以我想知道它是否可以在我的 useEffect() 挂钩中修复。我尝试过启用音频元素上的控件并使用 CSS 将它们从 DOM 中删除，但没有成功。

import React, { useState, useRef, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { gsap } from "gsap";

function RadioPlayerNav(props) {
    const audioEl = useRef(null);
    const [isPlaying, setIsPlaying] = useState(false);

    const playingTitle = document.querySelector(".radio-player-nav .title p");

    const toPX = (value) => {
        return (parseFloat(value) / 100) * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth);
    };

    const radioPlayerGSAP = gsap.to(".radio-player-nav .title p", {
        x: toPX("-5vw"),
        duration: 4,
        ease: "none",
        yoyo: true,
        repeat: -1,
        delay: 1,
        repeatDelay: 1,
        paused: true,
    });

    useEffect(() => {
        if (isPlaying) {
            audioEl.current.play();
            radioPlayerGSAP.play();
            // radioPlayerGSAP.reversed(4, false);
        } else {
            audioEl.current.pause();
        }
    }, [isPlaying]);

    return (
        <div className="radio-player-nav">
            <div className="radio-player-controls">
                <audio src="src/current-radio-mix.mp3" ref={audioEl} preload="auto"></audio>
                <i
                    className={isPlaying ? "fas fa-pause cursor-hover" : "fas fa-play cursor-hover"}
                    onClick={() => {
                        setIsPlaying(!isPlaying);
                    }}
                ></i>
                <div className="title">
                    <p>MIXED FEELINGS M0001</p>
                </div>
                <a href="src/current-radio-mix.mp3" download="Mixed Feelings M0001">
                    <i className="fas fa-download cursor-hover"></i>
                </a>
            </div>
        </div>
    );
}

export default RadioPlayerNav;

您可以在这里找到该项目的完整 github 存储库：https://github.com/nallstott/mixed-feelings/tree/master

Answer 1

事实证明，safari 要求您使用 useLayoutEffect 而不是 useEffect 来完成此操作。我将这篇文章留下来，因为我之前没有看到任何给出答案的内容，以及为我解决这个问题的文章，以防其他人<audio>在 safari 上遇到这个问题。

https://lukecod.es/2020/08/27/ios-cant-play-youtube-via-react-useeffect/