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

[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