Play function not working ios safari and desktop safari

[korayrubicoda]

Bug description

Unhandled Promise Rejection: NotSupportedError: The operation is not supported.
wavesurfer.current.play(); function does not work in safari

Environment

• Browser: Safari

Minimal code snippet

  const handlePlayPause = () => {
    setTimePlay(true);
    setPlay(!playing);
    if (playing) {
      wavesurfer.current.pause();
    } else {
      wavesurfer.current.play();
    }
  };

Screenshots

[korayrubicoda]

I think the problem is that the blob link does not work. Do I need to do anything extra for the source blob?

const formWaveSurferOptions = (ref: any) => ({
    container: ref,
    waveColor: "rgba(255, 255, 255, 0.3)",
    progressColor: "#D2E951",
    cursorColor: "black",
    barWidth: 3,
    barRadius: 4,
    responsive: true,
    hideScrollbar: true,
    height: 38,
    barGap: 5.5,
    interact: interact,
    url:blobUrl,
    // If true, normalize by the maximum peak instead of 1.0.
    normalize: true,
    // Use the PeakCache to improve rendering speed of large waveforms.
    peaks:peaks[0],
    
    // backend: "MediaElement",
    mediaType: "audio",
  });
 
  useEffect(() => {
    if (duration === 0) {
      setDuration(totalTime);
    }
  }, [duration, totalTime]);

  useEffect(() => {
    // setLoading(true);
    setPlay(false);
    setTimePlay(false);

    const options: any = formWaveSurferOptions(waveformRef.current);
    wavesurfer.current = WaveSurfer.create(options);

    /*
    let _peaks = testData.data;
    if (peaks && peaks.length > 0 && peaks !== "" && peaks !== undefined) {
      _peaks = peaks.filter((x: any) => x !== 0 && x !== undefined);
    }
    wavesurfer.current.backend.setPeaks(_peaks);
    wavesurfer.current.drawBuffer();
    */
    wavesurfer.current.on("audioprocess", function () {
      let _currentTime = wavesurfer.current.getCurrentTime();

      setCurrentTime(_currentTime);
    });
    wavesurfer.current.on("ready", function () {
      // setLoading(false);
      let _totalTime = wavesurfer.current.getDuration();
      setTotalTime(_totalTime);
      // https://wavesurfer-js.org/docs/methods.html
      // wavesurfer.current.play();

      // make sure object stillavailable when file loaded
      if (wavesurfer.current) {
        wavesurfer.current.setVolume(volume);
        setVolume(volume);
      }
    });
    wavesurfer.current.on("finish", function () {
      setPlay(false);
      setTimePlay(false);
    });
    return () => wavesurfer.current.destroy();
  }, [url]);

  useEffect(() => {
    if (playing) {
      const _remainingTime = (duration ? duration : totalTime) - currentTime;
      setRemainingTime(_remainingTime);
      getCurrentTime(currentTime);
    }
  }, [currentTime, totalTime]);

 
  const handlePlayPause = useCallback(
    () => {
      setTimePlay(true);
      setPlay(!playing);
      if (wavesurfer.current.isPlaying()) {
        setTimePlay(false);
        wavesurfer.current.pause();
      } else {
        setTimePlay(true);
        wavesurfer.current.play();
      }
    },
    [wavesurfer]
  );

[katspaugh]

Try this blob URL with a regular <audio> element instead of wavesurfer, it will likely also not work.

[ChristianWeyer]

Did you find a solution @korayrubicoda ?

[korayrubicoda]

Instead of the blob url, it puts the link coming from the API into the audio. I kept the url link that I sent to the API with the blob url in different states, and I showed Bloburl and it worked fine.

[maxiedaniels]

I just ran into this same error, safari only.. any update?

[katspaugh]

Try using a custom media element like in this example:
https://wavesurfer.xyz/examples/?video.js
but audio instead of video.

[719media]

So, I ran into some problems related to this and #2007

What I discovered was that the problem had to do with the header of the URL being loaded.
Safari had problems if the content-type was application/octet-stream (instead of, say, audio/mpeg). This application/octet-stream is a common header for s3 buckets if the file is uploaded using certain methods, so it can happen from time to time.

Anyway, perhaps that helps isolate the problem for someone. In my scenario, the ready event would never fire, and safari would never start playing the file (latest desktop and mobile iOS safari as of this writing)

[aleksa-codes]

So, I ran into some problems related to this and #2007

What I discovered was that the problem had to do with the header of the URL being loaded. Safari had problems if the content-type was application/octet-stream (instead of, say, audio/mpeg). This application/octet-stream is a common header for s3 buckets if the file is uploaded using certain methods, so it can happen from time to time.

Anyway, perhaps that helps isolate the problem for someone. In my scenario, the ready event would never fire, and safari would never start playing the file (latest desktop and mobile iOS safari as of this writing)

This saved me a lot of time on a different problem. I was working with AudioContext, OpenAI TTS, and Next.js, and the audio was not playing. I kept getting a NotSupportedError on iOS. After I changed the content-type to audio/mpeg for the OpenAI API response, it worked perfectly. Thank you!

[kdaniek-tuney]

For me switching from MediaElement to WebAudio in Safari solved the issue.

backend: isSafari ? 'WebAudio' : 'MediaElement'