(Safari only) Cannot play external audio url via .load(url), but works via .getMediaElement().src = url

[HStromfelt]

Hi all,

I am running into an issue on Safari only (works on Chrome and Brave at least).

I am using React/NextJS and this is the code snippet I am working with:

import React, { useEffect, useRef } from "react"
import WaveSurfer from "wavesurfer.js"

interface AudioWaveformProps {
  wavesurferRef: React.MutableRefObject<WaveSurfer | null>
  audioUrl: string
  onLoad: () => void
  onFinish: () => void
  onSeek: (time: number) => void
  setDurationString: (duration: number) => void
  hidden?: boolean
}

const AudioWaveform = ({
  wavesurferRef,
  audioUrl,
  onLoad,
  onFinish,
  onSeek,
  setDurationString,
  hidden,
}: AudioWaveformProps) => {
  const waveformRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!waveformRef.current) return

    wavesurferRef.current = WaveSurfer.create({
      container: waveformRef.current,
      waveColor: "#ffd712", 
      progressColor: "#fff",
      minPxPerSec: 0,
      hideScrollbar: true,
      autoCenter: false,
      autoScroll: false,
      barWidth: 3,
      barGap: 3,
      barRadius: 2,
      normalize: true,
      height: 43,
      fillParent: true,
    })

    wavesurferRef.current.addEventListener("ready", function (duration) {
      setDurationString(duration ?? 0)
      onLoad()
    })
    wavesurferRef.current.addEventListener("finish", onFinish)

    wavesurferRef.current.addEventListener("interaction", function (time) {
      onSeek(time)
    })

    return () => {
      wavesurferRef.current?.destroy()
    }
  }, [])

  useEffect(() => {
    if (!wavesurferRef.current) return
    wavesurferRef.current.empty() // without this, audio waveform doesn't load/show
    wavesurferRef.current.load(audioUrl)
    // adding this line causes audio to be playable. Waveform UI works for shorter audio (test 1-5s), but for some reason
    // for longer (29s) audio, audio playback is unstable and waveform interaction does not work.
    // wavesurferRef.current.getMediaElement().src = audioUrl 
  }, [audioUrl])

  return (
    <div
      ref={waveformRef}
    />
  )
}

export default AudioWaveform

I have put comments in the code to point out what it does and where/how it breaks.

I do not like having to set the source on the actual audio element to make it work, I think that this approach also interferes with the normal function of wavesurfer, which is why the behaviour thereafter seems less stable.

Lastly, I find that if I load a local file on the component render, using just .load(localurl) works ok.

I would like to figure out why .load(url) does not work for the external URL even though setting via getMediaElement().src = url is working.

[katspaugh]

Could be a CORS issue? Are there any errors in the console?
Also please share the audio URL.

[katspaugh]

Hmm, then you could try this:

const audio = document.createElement('audio')
audio.src = '<your secret URL>'
const wavesurfer = WaveSurfer.create({
  container: '...',
  media: audio,
})

[HStromfelt]

Thank you, I managed to try this. The waveform does generally show, but sometimes it isn't interactive and does not lead to the audio playing back for larger files.
Smaller files seem to at least start ok, but interaction is a bit unstable - when the audio plays, the progress UI is generally unstable and flickers around when I do a seek action.

[HStromfelt]

It appears to be to do with Safari's incompatibilities with WebM.
Strange that smaller webm can be played when I set the audio player src directly, but larger files seem to get totally stuck.

In any case, I confirmed the issue by saving a webm locally, ruling out the problem being with the external url.

[katspaugh]

You could also try using Web Audio for playback. It gives a smoother playback at the cost of consuming more resources:

const wavesurfer = WaveSurfer.create({
  container: '...',
  url: '<your url>',
  backend: 'WebAudio',
})

[HStromfelt]

This seems to do the trick!

In the end this code seems to work on Chrome and Safari:

import React, { useEffect, useRef } from "react"
import WaveSurfer from "wavesurfer.js"

interface AudioWaveformProps {
  wavesurferRef: React.MutableRefObject<WaveSurfer | null>
  audioUrl: string
  onLoad: () => void
  onFinish: () => void
  onSeek: (time: number) => void
  setDurationString: (duration: number) => void
}

const AudioWaveform = ({
  wavesurferRef,
  audioUrl,
  onLoad,
  onFinish,
  onSeek,
  setDurationString,
}: AudioWaveformProps) => {
  const waveformRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!waveformRef.current) return
    setupWaveSurfer(audioUrl)
    return () => {
      destroyWaveSurfer()
    }
  }, [audioUrl])

  const setupWaveSurfer = (url: string) => {
    if (!waveformRef.current) return
    if (wavesurferRef.current) destroyWaveSurfer()
    wavesurferRef.current = WaveSurfer.create({
      container: waveformRef.current,
      backend: "WebAudio",
      waveColor: "#ffd712", // "var(--clr-primary-yellow)"
      progressColor: "#fff",
      url: url,
      minPxPerSec: 0,
      hideScrollbar: true,
      autoCenter: false,
      autoScroll: false,
      barWidth: 3,
      barGap: 3,
      barRadius: 2,
      normalize: true,
      height: 43,
      fillParent: true,
    })

    wavesurferRef.current.on("decode", function (duration) {
      console.log("AudioWaveForm decode", duration)
    })
    wavesurferRef.current.on("ready", function (duration) {
      console.log("AudioWaveForm ready", duration)
      setDurationString(duration ?? 0)
      onLoad()
    })
    wavesurferRef.current.on("finish", onFinish)
    wavesurferRef.current.on("interaction", function (time) {
      onSeek(time)
    })
  }

  const destroyWaveSurfer = () => {
    if (!wavesurferRef.current) return
    wavesurferRef.current.unAll()
    wavesurferRef.current.destroy()
    wavesurferRef.current = null
  }

  return (
    <div ref={waveformRef} />
  )
}

export default AudioWaveform

[katspaugh]

You might want to use https://github.com/katspaugh/wavesurfer-react