How to play/decode Ogg files on Safari?

We are loading our audio from a url like this:

let audio = new Audio(url); self.wavesurfer.load(audio, peaks);

However, this does not work on Safari because they dont have any native decoders built-in like Chrome and Firefox.

How can I add a special JavaScript decoder such as https://github.com/chris-rudmin/opus-recorder or https://github.com/brion/ogv.js/ to WebAudio? We only have ogg files to stream right now…

[qwertycopter]

I had some success with ogv.js and wavesurfer.

I needed to change https://github.com/katspaugh/wavesurfer.js/blob/374e1b0aad7f66aab6a9477e836924a9dc568835/src/mediaelement.js#L177-L184 to

 _load(media, peaks, preload) { 
     // verify media element is valid 
     if ( 
         !((media instanceof HTMLMediaElement) && !(media instanceof OGVPlayer)) || 
         typeof media.addEventListener === 'undefined' 
     ) { 
         throw new Error('media parameter is not a valid media element'); 
     } 

and also https://github.com/katspaugh/wavesurfer.js/blob/1a8fea79055d3b3179c62e1dcf6d5f5867a79ca3/src/mediaelement-webaudio.js#L45-L48 to

_load(media, peaks, preload) { 
     super._load(media, peaks, preload); 
     if (!(media instanceof OGVPlayer))
     {
         this.createMediaElementSource(media);
     }
 } 

Then you can load in the OGVPlayer as if it was an Audio element

        var audio = new OGVPlayer({
            audioContext: wavesurfer.backend.getAudioContext(),
            audioDestination: wavesurfer.backend.analyser,
            wasm: false
        });

        audio.controls = false;
        audio.autoplay = false;
        var wave = document.querySelector('wave');
        wave.appendChild(audio);

        audio.src = "yourfile.ogg";
        wavesurfer.load(audio, peaks);

[thijstriemstra]

Also found this neat utility that might be useful here; https://github.com/jackedgson/crunker

“Simple way to merge, concatenate, play, export and download audio files with the Web Audio API.”