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

【问题标题】：audio does not play after pressing button in iphone safari在 iphone safari 中按下按钮后音频不播放
【发布时间】：2019-12-29 17:29:01
【问题描述】：

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

  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 不起作用？

【问题讨论】：

标签： reactjs safari web-audio-api

【解决方案1】：

通过阅读您的代码，我猜第二行在 Safari 中引发了错误。 Safari 仍然没有对 Web Audio API 的官方支持，AudioContext 仅作为webkitAudioContext 提供。

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

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

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

你可以这样使用它。

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

let context = new AudioContext();

我希望这会有所帮助。

【讨论】：