gorork/paper-audio-player

Have ability to set audio preload to metadata / none on player

Closed this issue ยท 10 comments

It would be very useful to be able to be able to set the preload attribute on the audio element to either metadata or none, to save on bandwidth and/or also make things easier when trying to track audio downloads (preloads count, but aren't really listens).

I did some preliminary testing, and a preload="metadata" seems to work just fine, however preload="none" breaks the player (clicking on the player does nothing).

I'll keep playing a bit and see how far I get, but this would be a very handy feature for me.

Thanks for the player never the less, this is super handy!

@markmandel Thanks! Your suggestion totally makes sense to me.

I believe, the issue you see with the preload="none" happens because currently the player listens to the audio loadedmetadata event to start itself. When this event doesn't fire, player assumes that it can't play the track.

This was made to display the broken src urls on load, so that users won't need to click on them just to find out that it can't be played.

By having preload property, we can check for it in ready function and if it's falsy, load the player without waiting for loadedmetadata event. Needs to be verified though.

I ended up hard coding support into my local version (I should do a proper PR at some point, but haven't had time to flesh out the total solution.

The big win for me was changing this function to load if canBePlayed is false, and setting autoplay to being true - then all the other events fire as normal.

I had to tweak what icons came up by default as well, but that was easy enough.

     playPause: function(e){
        e.preventDefault();
        var player = this;

        if ( player.canBePlayed ) {
          return player.isPlaying ? player.$.audio.pause() : player.$.audio.play();
        } else {
          //we aren't loaded, then try loading it again, and play straight away.
          player.$.audio.autoplay = true;
          player.$.audio.load();
        }
      },

@markmandel Sorry about hardcoding ๐Ÿ˜ฑ We definitely need a preload property to handle this scenario. Let me know if you want to play with this PR.

Closing since this now works ๐Ÿ‘

Sorry - I had thought this was merged into the release (just found out the hard way it wasn't ๐Ÿ˜ข)

We're running this now in production - https://www.gcppodcast.com/

It's worth noting - the preload feature is documented on the github page, but the bower release doesn't have the functionality in it. So you should increase the version number and release to bower.

@markmandel It wasn't released, because the preload feature is the one that fails some tests (e.g. on Safari). I'm planning to work on it soon and will release it right after this one is fixed. Sorry for the misleading docs! ๐Ÿ˜ณ Can you roll back for now?

Can you tell me which tests fail and on which browsers? (I may be able to live with it for now) I did a quick spot check on Firefox and Chrome, and things seemed to work.

@markmandel I've just checked it: all browsers successfully pass the test for preload=none (on both Windows and OS X machines). If you use this one, everything should be good. Safari and Edge fail the test that checks that preload=none is ignored when using together with autoplay.

Ah! Awesome, thanks for checking (I don't have Safari - I'm a Linux user)

We don't ever autoplay, so for us, that's not a concern.

Thanks for putting in the effort!