Audio Playlists – Multiple file type support?

by

I know when uploading an audio file (mp3) to a WordPress post, I can embed the player. I can then edit the embed to also include a link to the ogg version of the file to support Firefox. I can’t seem to find any documentation for doing the same thing with an audio playlist. When creating the playlist, using the WordPress media playlist creator, what ends up being created is a shortcake with audio file IDs. Can I have a playlist that has both the mp3 and the ogg accounted for?

1 Answer
1

No, it’s not supported currently in the core playlist as I understand it.

The following are just some rough ideas:

Within the WPPlaylistView.playCurrentSrc() method, in the wp-playlist.js file, we have: 

this.mejs.setSrc( this.playerNode.attr( 'src' ) );

This is currently only for a single source.

I checked the definition of srcSet() in MediaElment.js and found:

// This can be a url string
// or an array [{src:'file.mp4',type:'video/mp4'},{src:'file.webm',type:'video/webm'}]
setSrc: function (url) {

So it looks like there is a multiple file-type support in the MediaElment.js library.

Test ideas

If we had e.g. mp3 and ogg attributes, then the array might look like:

this.mejs.setSrc(
    [
        { src:this.playerNode.attr( 'mp3' ), type:'audio/mp3'},
        { src:this.playerNode.attr( 'ogg' ), type:'audio/ogg'}            
    ]
);

To test this we could have an ogg version for each mp3 media file in the playlist. Then we could add this array element:

src:this.playerNode.attr( 'src' ).replace( '.mp3', '.ogg' ), type:'audio/ogg'}

into the source array.

I’m not sure if one can override only the WPPlaylistView.playCurrentSrc() method or extend the WPPlaylistView Backbone view.

For testing one could e.g. dequeue the core wp-playlist.js file and enqueue a modified version instead.

Another approach might be to look for a way to adjust the player through the MediaElementPlayer object or with some other javascript workarounds.

Hope you can investigate this further 😉

Leave a Comment