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.

[Acorn]

I apologise that some of my links were typed incorrectly.

Here is an example design, without the MP3s included: JS - Audio Player.xar
You need to add in your own MP3s.

There is no code to change other than altering the MP3 filename.
Tested in Chrome and Firefox.

My design file is named JS - Audio Player.xar and if you add an MP3, it creates an external assets folder JS - Audio Player_xar_files containing the MP3.

You could add in a thousand MP3s and none will be downloaded until you fire up its play link.

Acorn

[Dilaco]

I think we best give up, Acorn. Just to give you an insight into the level of my ignorance I will respond to the first few instructions you gave me in your Xara file link:

How to add the Player to your Design
• Copy the Player & one Track to your design

What Design? Do I create a design in Xara and save it as a Xara file? What is ‘the Player’? Is it the rounded edge grey cylinder shaped graphic you have in your Xara file that you gave me a link to? How do I copy it ‘to’ a design? I drew a simple design in Xara and when I copy-pasted your player graphic to the design, the player replaced the design: erased it. Is your rounded edged cylinder thing with the play button the ‘design’? How do I copy a track to the design?

• Save your design

You mean save as a Xara file? You mean save the design along with the track and the Player that are supposed at this point to be copied to it?

How to add a Track
• Create a Box
• In Web properties > Placeholder link to your MP3 with Replace with graphic file

I made a box then I got the web properties window open and selected ‘Replace with Graphic File’, but I don’t know how to link this with an MP3. When I tried clicking the browse tab and directing it to the MP3 file it says “No items match your search”.

• Press Open & Apply

I can’t see the ‘Open’ tab/option.

• Copy the saved filename

What ‘filename’ are we referring to here? The design file? The MP3 track file? A Xara file?

Of course none of the instructions that follow will make any sense until the preceding instructions are realized.

I did try your alternative suggestion of removing class="xar_meplayer" in the code entry and Save, but as you said, this makes the player appear differently depending on which browser displays it.
For the moment my best workaround solution is to draw over the black parts of the player (it is the black colour I don’t like, not the player design itself) but not to draw over the parts that will be clicked on: the play/pause arrow, the volume bar, etc. I find that it works in preview mode as long as I don’t turn the shapes that I drew into a Group. If I group the shapes the player doesn’t respond to mouse clicks in preview mode. A Soft Group works okay.

Thanks for trying with me; at least you now know how stupid I am.

[Acorn]

I think we best give up, Acorn. Just to give you an insight into the level of my ignorance I will respond to the first few instructions you gave me in your Xara file link:

How to add the Player to your Design
• Copy the Player & one Track to your design

What Design? Do I create a design in Xara and save it as a Xara file? What is ‘the Player’? Is it the rounded edge grey cylinder shaped graphic you have in your Xara file that you gave me a link to? How do I copy it ‘to’ a design? I drew a simple design in Xara and when I copy-pasted your player graphic to the design, the player replaced the design: erased it. Is your rounded edged cylinder thing with the play button the ‘design’? How do I copy a track to the design?

• Save your design

You mean save as a Xara file? You mean save the design along with the track and the Player that are supposed at this point to be copied to it?

How to add a Track
• Create a Box
• In Web properties > Placeholder link to your MP3 with Replace with graphic file

I made a box then I got the web properties window open and selected ‘Replace with Graphic File’, but I don’t know how to link this with an MP3. When I tried clicking the browse tab and directing it to the MP3 file it says “No items match your search”.

• Press Open & Apply

I can’t see the ‘Open’ tab/option.

• Copy the saved filename

What ‘filename’ are we referring to here? The design file? The MP3 track file? A Xara file?

Of course none of the instructions that follow will make any sense until the preceding instructions are realized.

I did try your alternative suggestion of removing class="xar_meplayer" in the code entry and Save, but as you said, this makes the player appear differently depending on which browser displays it.
For the moment my best workaround solution is to draw over the black parts of the player (it is the black colour I don’t like, not the player design itself) but not to draw over the parts that will be clicked on: the play/pause arrow, the volume bar, etc. I find that it works in preview mode as long as I don’t turn the shapes that I drew into a Group. If I group the shapes the player doesn’t respond to mouse clicks in preview mode. A Soft Group works okay.

Thanks for trying with me; at least you now know how stupid I am.

Dilaco, I was trying to use vocabulary common to Xara and Windows in a see 'n' do manner and not produce a beginner's primer.
Look at https://www.w3schools.com/html/html5_audio.asp, then https://www.w3schools.com/tags/ref_av_dom.asp to understand the richness of just the <audio> Tag, its properties and methods; all before I shoehorned it into one HTML line of code. Xara's approach overwrites all this, using over 100kB to do so and you still cannot mute a prior song on selecting a new one.

The clue to 'Player' is the Xara 'design' I uploaded: Player -> Audio Player; design -> your Xara file, which might be a .XAR or .WEB file extension.
'Your design' -> whatever your are designing and using (and saving).
Placeholders can be any shape and when you add HTML and Apply that code, Xara tries to render the code as an image. The image generated -> my 'rounded edged cylinder thing'.
'How do I copy a track to the design?' -> follow the instruction in the Add a Track section
'Replace with graphic file' -> requires MS Windows acumen in that if you are searching for a non-graphic file, you change the File type to All Files (*.*).
I would have thought it clear enough to press the Browse button; The File Type drop down is just right of the File name box; the Open button is underneath that.
When Open is clicked, the Open dialog closes and you have the Xara Web Properties > Placeholder tab open showing the found MP3 file name -> press the Apply button.
Copy the shown filename.

The reason I provided the example design file was for you to examine each of the Player components to give some gravitas and meaning to the adjacent instructions.
All you need do is copy the Audio Player and some controls over and the heavy lifting is done. All then required is the fetching in of an MP3 and its linking to a Restart link.

Basically, there are six separate lines of code you are adding: one for the Player, one JavaScript function to switch tracks/songs and four JavaScript Links.
The Restart Link is the only one thereafter that is changes for each new MP3 added.
When you 'Add a track', as you perform Open & Accept, Xara adds the MP3 into its external assets even if you subsequently delete the Box that it was opened with.
You clone an existing Replay icon and alter its Link to point to the new MP3 file name.

The major advantage of this approach is a browser viewer only downloads those songs they want to hear. Xara's approach would swell the page download size massively for all the listed songs.
It also makes page responsiveness vastly better.

If originally you had said "I don't like the Black background of the Xara player" then someone might have solved that for you.
To that end, you or they can tweak this Website Body CSS:

<style>
.mejs-controls {
  filter: invert(90%) hue-rotate(18deg) brightness(1.3);
}
</style>

Twiddle the the numbers until you get what you want.

It doesn't get round your problem of muting prior songs.

The technique is ideal for MP4 videos hosted by the designer/website owner.
It can be used for YouTube but that brings its own problems so another method using lazy loading is usually better.

Acorn

[Acorn]

@Dilaco, if you have the time, I have drafted up a more detailed explanation.
The PDF is an output of a fully interactive application where all the code can be copied or the design can be run in Xara.

MP3 Audio Jukebox.pdf

Does this make any better sense?

I found @Initiostar's three examples to be clear enough as well.
I just developed the Jukebox design a little more tightly.

Acorn