Wavesurfer.js: Content from Podcast Provider Megaphone.fm does not load fully.

Created on 2 Sep 2019 · 12Comments · Source: katspaugh/wavesurfer.js

It seems Megaphone.fm inserts dynamic ads into the stream. When loading streams into WaveSurfer only the ad loads BUT looking at network traffic you can see the entire audio file is downloaded.

Wavesurfer.js version(s): Latest from https://unpkg.com/wavesurfer.js

Browser and operating system version(s): Mac, PC Chrome, Explorer, Safari, etc,

Code needed to reproduce the issue:

<!DOCTYPE html><!--suppress ALL -->
<html xmlns="http://www.w3.org/1999/html">
<head>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", () => {

        const wavesurfer = WaveSurfer.create({container: '#waveform',waveColor: 'blue', progressColor: 'red'});
        wavesurfer.load('https://traffic.megaphone.fm/HSW2183165052.mp3');

        document.querySelector('#wfplay').onclick = (e => {
            wavesurfer.play();
        });
    });
</script>
</head>
<body>
    <div id="waveform"></div>
    <button id='wfplay'>Play</button>

    <br/><br/>

    <audio controls preload>
        <source src="https://traffic.megaphone.fm/HSW2183165052.mp3" type="audio/mp3" preload></source>
    </audio>
</body>

Use behaviour needed to reproduce the issue:

Notice that Wavesurfer downloads the entire MP3 which is 40 minutes long, about 45 MB. BUT it only loads the first 15 or 30 seconds into the player.

needs-update question

Source

rick-rheo

All 12 comments

@rick-rheo this looks like an issue with a file, not sure what to do about it in wavesurfer.js.. what do you suggest?

thijstriemstra on 4 Sep 2019

Other players load and play this file just fine. Many/most streams from megaphone.fm have this issue with Wavesurfer. Its probably their fault but other players get around it. I don't know how Wavesurfer works internally so I have no suggestions other to figure out why it isn't loading the entire file even though it downloads it.

rick-rheo on 4 Sep 2019

Their FAQ doesn't describe their audio file format, only thing I found is this: http://support.megaphone.fm/en/articles/1561152-soundcloud-and-megaphone

I would not rely on 'pure' megaphone audio files and would convert them serverside instead.

thijstriemstra on 4 Sep 2019

I'm not sure what you mean by "convert them serverside instead" . The support article you linked is referring to podcast catalog meta information, not the audio file. The audio format is standard mp3.

rick-rheo on 4 Sep 2019

well if it's standard MP3, why does it give problems then? with serverside converting I mean: download the audio file and convert it using ffmpeg (on a server for example) to ensure there is no weird tags/whatever in the file and it can be properly loaded by wavesurfer.js. Not sure what else to suggest. You could contact megaphone and ask for more details about their files.

thijstriemstra on 4 Sep 2019

This is something going on in Wavesurfer. Their files are MP3. Every player other than WaveSurfer plays them. I don't know how you load the audio into the player. I assumed you knew the code and could determine why only the first 15 or 30 seconds load. Are there some weird tags/whatever that can be accommodated by wavesurfer? For me the server IS megaphone. There is no other server.

rick-rheo on 4 Sep 2019

I assumed you knew the code and could determine why only the first 15 or 30 seconds load.

I'm not a magician. And I don't care about megaphone. I have no idea what's going on here.

thijstriemstra on 4 Sep 2019

Not asking for magic. I guess I was wrong that the author would be concerned that a major podcast CDN is serving content that can't be loaded into their library and that same author would know their code well enough to debug what's going wrong fairly easily. But clearly you don't care.

I'll just figure it out myself on my own fork. Thanks for being so helpful.

rick-rheo on 4 Sep 2019

👎1

But clearly you don't care.

Don't be an asshole. I am doing all of this in my free time, there is no need to talk to me like this. I am not obligated to help you out with problems that are related to a third-party service. If you think it's ok to talk to people that put out open source software for free, you need to think twice about your expectations. Unbelievable.

thijstriemstra on 5 Sep 2019

The more I read your response, the more it pisses me off. I've never had to deal with such douchebags on github. What the hell is wrong with you @rick-rheo?

thijstriemstra on 5 Sep 2019

Look at your own response to see a douchebag. "I don't care about megafone" etc. You could have spent 10 minutes looking to see why the audio doesn't load or you could have pointed me to the right place to look myself. Instead you threw up excuses and blame. There's a problem in your code. This is not just related to megafone, and I'm sure its something they are doing that does not break the MP3 spec that you are not handing. That's something I would think an author would be concerned about. But instead you want to be a dick. So I'm going to fix this myself and if anyone out there runs into the same thing, contact me and I'll send you the fix because I'm sure as hell not going to commit it upstream.

rick-rheo on 5 Sep 2019

😄1

Hey great response!