How to play/decode Ogg files on Safari?

[MileanCo]

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...

[thijstriemstra]

check https://collab-project.github.io/videojs-record/examples/audio-only-ogg.html for wavesurfer visualizing live audio using opus-recorder (and recording it). perhaps that project or videojs-wavesurfer can give you some clues.

[MileanCo]

Ok thanks! I dont need to visualize the audio, since I already have the json file from audiowaveform. Just need to play the audio in ogg format.

[MileanCo]

Are there any plugins you can add to wavesurfer.js that will decode the ogg properly on all browsers?

[thijstriemstra]

@MileanCo not yet but sounds like a good idea. Want to give it a try?

[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."

[Sibgha228]

@MileanCo Were you able to play the ogg file in wavesurfer ? I am using ogv.js to decode and play the ogg file but the player has no controls itself.

[anthumchris]

@MileanCo fetch-stream-audio exemplifies low-latency Ogg Opus streaming and works in Safari. Perhaps something similar could be integrated into Wavesurfer?

[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);

[frosttho]

Thanks @qwertycopter! Whenever I enter those changes, my wavesurfer.on('ready', function () { ... } is never triggered. Did you encounter the same problem and maybe even found a solution for it?

As a side note: I changed it in the wavesurfer.js from UNPKG as I'm not really used to developing in Javascript and this seemed to be the most easy way for me. Besides the event that isn't triggered, it seems to work fine.

[qwertycopter]

wavesurfer.on('ready') is firing for me. Perhaps something else is going on? I'm back on version 4.2.0

Thanks @qwertycopter! Whenever I enter those changes, my wavesurfer.on('ready', function () { ... } is never triggered. Did you encounter the same problem and maybe even found a solution for it?

[frosttho]

Thanks a lot for the fast response and the helpful hint. It indeed works with 4.2.0 in my case!

Just as a side note: I additionally encountered a playback problem with v5.1.0 in Safari 14 whereas Safari 13 does play with both versions.

Safari 11 and earlier don't play with any of the two versions, but it seems that this problem is more related to ogv.js than to wavesurfer.

[danshao]

Thanks a lot for the fast response and the helpful hint. It indeed works with 4.2.0 in my case!

Just as a side note: I additionally encountered a playback problem with v5.1.0 in Safari 14 whereas Safari 13 does play with both versions.

Safari 11 and earlier don't play with any of the two versions, but it seems that this problem is more related to ogv.js than to wavesurfer.

@frosttho Can you please share your implementation and the steps to get ogv working with wavesurfer?

[frosttho]

@danshao I don't fully remember this as it is already quiet some time ago. But I know that in the end, we had to go back to mp3 files instead of ogg.

As I don't have any Mac hardware to test with, I tried with a macOS Virtual Machine. Inside the VM, I finally got ogg to work in Safari. However, on an iPad of a colleague it never worked. Apparently there are additional differences between the two devices.

In the end, it turned out to be easier for our workflow to add additional conversion to mp3 instead of putting more effort into getting ogg to work.