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

[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

[Dilaco]

Acorn, I was just about to write a response to your prior post to say please don’t let me waste any more of your time because I just don’t seem to have the aptitude for this science ... but then I saw your latest post. Okay, maybe I give up too easily. When I get the time I will go through the PDF that you have kindly drafted. Much gratitude for your efforts.

[Acorn]

Acorn, I was just about to write a response to your prior post to say please don’t let me waste any more of your time because I just don’t seem to have the aptitude for this science ... but then I saw your latest post. Okay, maybe I give up too easily. When I get the time I will go through the PDF that you have kindly drafted. Much gratitude for your efforts.

Dilaco, it seems a shame to waste the effort @Initiostar and I have made on getting working solutions for this as in its own way it is compact, elegant and does the job without adding in wasteful third-party products.

Acorn

[bwood]

Acorn, I was just about to write a response to your prior post to say please don’t let me waste any more of your time because I just don’t seem to have the aptitude for this science ... but then I saw your latest post. Okay, maybe I give up too easily. When I get the time I will go through the PDF that you have kindly drafted. Much gratitude for your efforts.

Dont give up Dilaco. It’s the code thats scaring you. Don’t let it. In xara terms a placeholder is just that. A holder of code. It’s simply a matter of cut and paste and correct. I was one who messed around with a simply drag and drop approach but the Xara design was messy. Third party one has to pay for or has commercials.
The solution that Acorn and Initostar came up with is very elegant for anyone.

[Dilaco]

Acorn, if I commit to following the instructions from your latest PDF draft, and if you have unlimited patience, I think the best approach is for me to simply relay to you when there is ambiguity in the instructions, or when there is insufficient information for a beginner to proceed. (I might be wrongly assuming that your instructions are intended for everyone from beginner to advanced, but as you have given them to me knowing that I am a beginner and that I am ignorant, I think I am assuming correctly.)
Under the ‘Alternative’ section, you seem to be saying two different things: “Simply removing the 'class="xar_meplayer"' statement will avoid the need for the above; it is still part of your upload and can be avoided, as follows...” The first part of the instruction, before the semicolon, seems to be complete in itself, saying that all you need to do is remove this ‘statement’ from the code (actually the beginner doesn’t know that this ‘statement’ is to be found in the Xara player body code, I only know what you’re referring to here because you mentioned it to me before). But then in the same sentence you seem to be saying that if you do something else in addition to this then the problem will be avoided; and you go on to give instructions about creating a box in which to place code. So, this creates confusion for the beginner, who doesn’t know whether to follow the instruction in the first part of the sentence (to simply remove the code statement), or to follow the instruction in the second part of the sentence (create a new box), or if he should actually do both.

I decided, probably mistakenly, to start from scratch on a blank web page and create a box, as you said, 400px by 60px. I then opened the properties window, went to placeholder and copied your code into the body, clicked the apply tab > OK. Seems simple enough, even though as a beginner I didn’t understand your explanation of the code: “'src' is empty and it created externally with a simply JavaScript call” Should that read, ‘and is created’? Either way this statement conveys no meaning to a beginner because a beginner doesn’t know what src is, he doesn’t know what ‘empty’ is, he doesn’t know what ‘created externally’ is and he doesn’t know what a ‘simply JavaScript call’ is.

The instructions in the next section, ‘1 line Jukebox Construction’, is where the beginner, if he is no smarter than me, gets really confused: “The following code is for deployment into a Xara design where the MP3 is part of the external assets of the design and so is located in the index_html_files/ folder.” I don’t know where the ‘index_html_files/folder” is or how to locate it, or even if it has been created yet if I haven’t made an MP3 a ‘part of the external assets’ (which I don’t know the meaning of). So, I am going to assume that the ‘index_html_files/folder’ is the folder with the suffix, ‘_xar_files’ that is automatically created when you save a new Xara website project. (By the way, if this is correct, I now know why I couldn’t find the MP3 files in this xar_files folder before. It was because by default the small box at the bottom right of the window, just above the Open and Cancel tabs was only displaying “Image (PNG, JPEG, GIF)” files. When I clicked the drop-down menu arrow, it gave the option of “All Files”. With All files displayed I could now see my MP3 files in the folder.)

The ambiguity is in which box to place the following new code: <script>
function aplayer(song) {
document.getElementById('audiplay').setAttribute(' src', 'index_html_files/' +
song);
}<
/script>)

There is ambiguity because your next statement is: “Assumes the MP3s will be added to the 'index_html_files/' folder (See Adding your Songs)” When I went to this “Adding your Songs” section of your PDF, it instructed me to create another box—which I did. And for this box I opened the placeholder window, and I clicked the ‘Replace with Graphic File’ section like you said to; then I browsed to the _xar_files folder (which might be a different folder to the Index HTML folder you are referring to?) and I opened an MP3 file, which now has its title displayed in this section. Part of the ambiguity is in your next instruction:

“As no song is selected on page load, it is appropriate to include this JavaScript in the same
Box's Placeholder Body (see Body Code).” Which box? Now I have two boxes. Is it the box I have created for the MP3 file, or is it the original box I created with the first code I copy-pasted into it? (You have “see Body Code” in brackets at the end of the sentence, but I can’t find anywhere in your PDF a section called, Body Code. Unless this is a link that doesn’t work in my version of Adobe Reader?) Anyway, supposing I choose the original box: Where do I copy-paste the new code/javascript? Do I copy it before the other code or after it? Do I need to press the Enter/Return key after the original code and start a new line, or do I just paste it next to it? I took a wild guess, hit the Enter/Return key and pasted it after the other code.

I have probably done everything wrong so far but I have got to the point in the instructions where I am completely stuck: “1 Line External Javascript Calls”. Under sub-headings such as Restart and Pause you have a short line of code which I don’t know what to do with. If I am to copy-paste it, where should it go? I have no idea what an ‘element with link’ is.

Also further down your PDF you have what is probably the most important part of the process?
“Xara Design: Click Edit Design File to open an example design directly in your Xara application.” Where do I find this “Edit Design File” tab or link in Xara? If your purple underlined words in the PDF document are meant to be links they are not working as such, like I said, in my version of Adobe Reader which is pretty up to date. Could be me being dumb again?

[Acorn]

Dilaco, I have taken your comments on board.

I think that you have to balance what is being offered here to what you had been considering in procuring an external package or product. If you had, you would have no instruction on how to integrate it into a Xara design.

I would have placed the Audio Player construction as Easy.
Bulk MP3 Uploading as Medium.

There comes a level of awareness that no one would reasonably be expected descend beyond.
I do no explain Placeholder or other terms that are part of Xara.
Knowing how to add a Link to a thing in Xara is basic 101.
I do not expand on MP3, JS, CSS unless there is a direct and important association.
If it is a Windows action, like finding a file, then I am not the person you should be asking for advice.
If it is code then you can search on the internet for HTML5 Audio as I offered earlier to get an explanation for what it encompasses.
Did you 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?
Did you look at @Initiostar's examples?
If you haven't then why should I be explaining 'src' or other terms?

I had believed you have been following the Thread, as all of it is reflected in the PDF.

The PDF was there for you to work with the material I already provided. The linked design file you already have.
I really think you ought to work from that first. I have added a suggested approach at the bottom of the revised PDF.

I have abridged everything needed into the the Approach Summary, near the top of the revised PDF. This would be for experience Xara users but is still the pathway for what a novice has to address.

The flow of the PDF is correct.
If you jump to a section then it is incumbent on you to come back and continue.

Here is the revised and corrected PDF: MP3 Audio Jukebox.pdf.

Thank you for pointing out the internal links are not working.
I have made them explicitly indicate the heading they should be going to.

Acorn