Looking for an MP3 Music Player to display on a website I am building

[Initiostar]

The Xara Media Player has always been a bit quirky:

1. Here is an example where if one drags the MP3 onto a popup, the MP3 will correctly play AND pause when the popup closes (unlike the standard audio tag) >> https://initiostar.co.uk/demo/xaraAudio/ - this seems to work for v19 and Pro +

2. In Pro + (current version) you can drag and drop multiple MP3s to create a fairly simple Jukebox style plugin >> https://initiostar.co.uk/demo/xaraMedia-Player/ - the issue thereafter is that as one switches between tracks, each track pauses at its current position; you can overcome this with a reload command and probably other ways too.

3. Here is an example of Acorn's 2024 code variation that removes the need for a short blank MP3 (known as load.mp3 in earlier examples) >> https://initiostar.co.uk/demo/Audio-Player-24/

4. Here is a more creative plugin that adds additional descriptive content for each MP3 >> https://initiostar.co.uk/demo/AudioPageHolder/ - it shows the plug-in embedded into the main site and works for desktop and mobile.

All the above were first created as "plugins" with a 640px width and Scale-to-fit-Width. In the examples here, they would be published to a main website with a file name such as "audio-player"(not index) and called into the main website using a placeholder.

For [1] I cannot tell if it works for the perpetual licence v20, but all seems OK with Pro +

The original demo is here >> https://initiostar.co.uk/demo/Jukebox/

The Xara Media Player does generate errors that can be seen when you Inspect any site using it in a browser [ right click to tab Inspect ] but other than that it seems to work OK.

[Acorn]

The Xara Media Player has always been a bit quirky:

1. Here is an example where if one drags the MP3 onto a popup, the MP3 will correctly play AND pause when the popup closes (unlike the standard audio tag) >> https://initiostar.co.uk/demo/xaraAudio/ - this seems to work for v19 and Pro +

2. In Pro + (current version) you can drag and drop multiple MP3s to create a fairly simple Jukebox style plugin >> https://initiostar.co.uk/demo/xaraMedia-Player/ - the issue thereafter is that as one switches between tracks, each track pauses at its current position; you can overcome this with a reload command and probably other ways too.

3. Here is an example of Acorn's 2024 code variation that removes the need for a short blank MP3 (known as load.mp3 in earlier examples) >> https://initiostar.co.uk/demo/Audio-Player-24/

4. Here is a more creative plugin that adds additional descriptive content for each MP3 >> https://initiostar.co.uk/demo/AudioPageHolder/ - it shows the plug-in embedded into the main site and works for desktop and mobile.

All the above were first created as "plugins" with a 640px width and Scale-to-fit-Width. In the examples here, they would be published to a main website with a file name such as "audio-player"(not index) and called into the main website using a placeholder.

For [1] I cannot tell if it works for the perpetual licence v20, but all seems OK with Pro +

The original demo is here >> https://initiostar.co.uk/demo/Jukebox/

The Xara Media Player does generate errors that can be seen when you Inspect any site using it in a browser [ right click to tab Inspect ] but other than that it seems to work OK.

Gary, thank you for working so hard on these.

1. Pop-ups auto-play as the user has manually selected it. A pop-up is different therefore to a page load, which browsers block the playing of any audio. It is possible the stopping of the audio when the pop-up closed is a (lock) layer feature that I have rarely used so didn't realise it did that. It might be a recent Xara change but I doubt it.
2. Track-switching was the original aim so only one audio stream was active. Until the JavaScript code I've just added, this was not a native function of the HTML5 Players; it could be done but was messy unless your only offered one Player and swapped in the audio tracks as you ably demoed.
3. Thank you for the rework here. I have found if you wrap the same with a <div> Tag that has an id, you are better placed to engage with the player through code and styling.

In [1], the original issue after many Posts was that @Dilaco didn't like the Xara colour scheme for its player. Hence my simple CSS. I couldn't be fussed in forking into old Xara styling to effect a total transform as the HTML5 Players are better across different browsers.

The following is probably just as a record what my discoveries: MP3 Jukebox.xar
The file is 134kB when the Xara Players are involved and downloads over 600kB of data.
Cut them out and the file drops to 22kB and the download is 380kB; do note the audio files here are minute.
Importantly, the HTML5 Players are acting as lazy loaders. With the Xara Players, all the audio files are downloaded at once. Think what that might do to your website if you had 100 audio files to offer!
The HTML5 Players can also be resized and avoid the implicit jQuery addition.

Acorn