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

[Dilaco]

Looking for an MP3 music player for a musician’s website to demonstrate excerpts of his original music. I am having a hard time finding one. Most Players seem to be designed for WordPress. Other music players are subscription based at exorbitant prices. Some require you to be a computer programmer in order to get the thing to work. Something that I can just import and drop onto a web page, or a simple code to copy-paste into a placeholder in Xara, would be ideal.

I realize that Xara has a stock MP3 player that is easy to use, but I don’t like how it looks and it doesn’t like being resized (all sorts of crazy things happen). Also a problem with it is that you hear two songs playing at once if you click the play button on another song whilst there is a song already playing.

Anyway, here is what I am NOT looking for:

I am not looking for anything cloud-based; I am not looking for links to Spotify or iTunes or YouTube. I am not looking for a jukebox/song list of other people’s music.

I am willing to pay for the software, but absolutely no subscriptions.

I wonder if anyone can advise me? The only Talk Graphics posts I could find remotely related to the subject were from around 10 years or so ago.

[Chris M]

Have a look at Initiostar's post Audio UI like this example (talkgraphics.com)

He and Acorn spent a fair bit of back and forth on both audio and video players.

[Acorn]

Dilaco, one of the simplest is described by @Initiostar in https://initiostar.co.uk/demo/Jukebox/.

Drop each of your samples onto your design page. Reject Auto-start. Then delete the control.
The MP3s will now be in your index_htm_files folder.

Replace htm with html throughout if you have this option ticked.

Create a 400x60px Placeholder and add @Initiostar's code, but modified as you know where the MP3s now are:

<audio id="audiplay" src="index_htm_files/load.mp3" controls autoplay controlsList="nodownload" style="width: 400px;"></audio>

In your case, hide the player behind something else.

In the Website Code Body, put:

<script>
var audio;
var source ='index_htm_files/';
function aplayer(song) {
  var locate = document.getElementById('audiplay').setAttribute('src', source + song);
  audio=locate;
}
</script>

'song' is the MP3 filename, e.g., load.mp3; this is not the same as the Song Title.

Create a list or table of samples, the simplest is by Song Title appended with a green Play icon.
For each add the link, javascript: aplayer('index_htm_files/<sample>.mp3'). Click the text or Play icon to start the sample. Click another and that play and the previous one stops (as the source has been swapped out).
Beside each, create a set of horizontal traffic lights for Amber and Red:
All Ambers have the same link, javascript: audiplay(pause);
All Stops have the same link, javascript: aplayer('load.mp3'); This swaps out the current sample for a 1-second quiet song as there is no clean way to easily stop an MP3.
You could try javascript: aplayer(''); but this may error.
You may also have to add void just before each JS call - javascript: void ... ;

Come back with questions but include a sample design file so we can correct if required.

Acorn

[Dilaco]

Thank you Chris M and Acorn for your responses.

I very much appreciate the time and effort you took to explain the process to me Acorn. However I didn’t realize that I would be opening such a convoluted ‘can of worms’. I actually don’t think I have the intelligence to do this. I feel like Maxwell Smart Agent 86 (if you are familiar with that old show) when the Chief asks him, “Which part didn’t you get, Max?” and he answers with, “That part after listen carefully”. In my case it’s “That part after ‘Create a 400x60px Placeholder and add @Initiostar's code...’” Which I did actually do, and that’s as far as I got.

I might have to stick with the MP3 Player that comes with my version of Xara. I will only frustrate you guys with stupid questions and then get frustrated myself when I don’t understand the answers. So far I have managed to create websites with Xara knowing nothing more than how to turn an image into a link, and how to import an MP3 onto a web page.

Perhaps for the moment I could just ask if anyone knows if the stock MP3 Player that comes with Xara appears differently in different versions. I am currently using the Magix version of Xara from 2021: Designer Pro X version 17. I am thinking of upgrading to the Xara version—the ‘one time purchase’ version—Designer Pro V-20. It may not even have an MP3 Player built in? I don’t know.

Thank you again.

[Acorn]

Thank you Chris M and Acorn for your responses.

I very much appreciate the time and effort you took to explain the process to me Acorn. However I didn’t realize that I would be opening such a convoluted ‘can of worms’. I actually don’t think I have the intelligence to do this. I feel like Maxwell Smart Agent 86 (if you are familiar with that old show) when the Chief asks him, “Which part didn’t you get, Max?” and he answers with, “That part after listen carefully”. In my case it’s “That part after ‘Create a 400x60px Placeholder and add @Initiostar's code...’” Which I did actually do, and that’s as far as I got.

I might have to stick with the MP3 Player that comes with my version of Xara. I will only frustrate you guys with stupid questions and then get frustrated myself when I don’t understand the answers. So far I have managed to create websites with Xara knowing nothing more than how to turn an image into a link, and how to import an MP3 onto a web page.

Perhaps for the moment I could just ask if anyone knows if the stock MP3 Player that comes with Xara appears differently in different versions. I am currently using the Magix version of Xara from 2021: Designer Pro X version 17. I am thinking of upgrading to the Xara version—the ‘one time purchase’ version—Designer Pro V-20. It may not even have an MP3 Player built in? I don’t know.

Thank you again.

Dilaco, then drag an MP3 onto your design. Reject Auto-start. Edit the Placeholder Body and remove the class="xar_meplayer" entry and Save.
This removes the Xara coding and the Player then uses the built-in HTML5 resource instead.
The Player appear native to each browser used.

You may still have to stretch the height of the Placeholder.

You will still be stuck with the issue of multiple tracks playing at once.

Acorn

[Initiostar]

The original work was developed for this website with Acorn's direction and help: http://www.jonphilibert.com/jukebox.htm

The concept a uses a plugin which can is inserted into the same directory as the main website, which usually, has a desktop and mobile variant, as you can see from the Jon Philibert website:

If this is similar to what you are trying to achieve, I can post a working example, just not the one here which is copyright.