在 iphone safari 中按下按钮后音频不播放

Question

我有一个反应组件，它有一个带有处理程序的按钮来播放音频。

  const initializeAudio = () => {
    let context = new AudioContext()
    let analyser = context.createAnalyser()
    let audioSrc = context.createMediaElementSource(audioRef.current)
    audioSrc.connect(analyser)
    analyser.connect(context.destination)
    analyser.fftSize = 512
    setAnalyser(analyser)
  }

  const play = () => {
    if (!audioSet) {
      initializeAudio()
      setAudioSet(true)
      audioRef.current.volume = 0.5
    }
    audioRef.current.play()
    setPlaying(true)
    interval = window.setInterval(turnToTime, 1000)
  }

<audio
            data-keepplaying
            ref={audioRef}
            id="audioElement"
            src={audio}
          />
          <WaveForm analyser={analyser} />
          <button onClick={isPlaying ? pause : play} className="media_button">
            <FontAwesomeIcon
              className="fa-icon"
              icon={isPlaying ? "pause" : "play"}
              style={!isPlaying && { paddingLeft: "0.4rem" }}
            ></FontAwesomeIcon>
          </button>

在 firefox 和 chrome 上一切正常，但在 iphone 上的 safari 上无法正常工作，有人知道为什么吗？

我觉得我的音频是为响应点击而创建的，这正是新限制所需要的，但为什么 safari 无法正常工作？

Answer 1

通过阅读您的代码，我猜想第二行在 Safari 中引发了错误。 Safari 仍然没有对网络音频 API 的官方支持，并且 AudioContext 仅作为 webkitAudioContext.

可用

如果初始化上下文是您唯一关心的问题，那么使用以下技术可能会奏效。

let context = new (window.AudioContext || window.webkitAudioContext)();

但是我不建议使用它，因为它对待 Safari 的实现与 Firefox 或 Chrome 中的实现类似，尽管它们在许多方面有所不同。因为我是 standardized-audio-context 的作者，所以使用这个包当然是我处理 Web 音频 API 不一致浏览器支持的首选方法。 :-)

你可以这样使用它。

import { AudioContext } from 'standardized-audio-context';

let context = new AudioContext();

希望对您有所帮助。

在 iphone safari 中按下按钮后音频不播放

audio does not play after pressing button in iphone safari

safari

reactjs

web-audio-api