Question

我有一个react组件，该组件带有一个带有处理程序的按钮，可以播放音频。

  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浏览器上无法正常工作，有人知道为什么吗？

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

Answer 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();

我希望这会有所帮助。

按下iphone Safari中的按钮后，音频无法播放

1 个答案: