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

[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

[Dilaco]

Acorn, when you announced (in post #10) that you had drafted a new PDF of instructions, and asked me “does this make any better sense?”, I wrongly assumed that the instructions were aimed at the beginner who knows nothing about code; I assumed this because you offered them to me with full awareness of the fact that I am totally ignorant in this field and that I am self-confessed stupid. After meticulously going over and over again your PDF document of instructions, in a clueless state of confusion, I took it upon myself to clearly indicate where the points of confusion came up. I hope I didn’t cause any offence in doing this, and if I did I apologize.

Yes I have looked at Initiostar’s examples, and the w3schools.com pages, but unfortunately in doing so I didn’t suddenly become enlightened as to the true nature of ‘src’ or any other code term that I have never seen or heard before. (Actually, in the Firefox browser the jonphilibert.com website player looked more or less identical to the stock Xara player anyway, and is the jet black colour I don’t like.)

So, I am sorry that I still don’t get it, but at least I tried. It could even be that one day I will come back to your PDF instructions and forum posts and I will go, “Aha! Now I know what Acorn meant when he said, such and such.” In the meantime, at least I have an answer to my original post, which is:

“No, there is no MP3 Player out there that you can just import and drop onto a web page, and there is no simple code to copy-paste into a placeholder in Xara. If you want an MP3 Player other than the one Xara offers you are going to have to do a course in reading and writing computer code; and until you have learned the terminology and significance of this code, both in theory and in practice, it would only be a waste of everybody’s time to go on this forum and ask for any help.”

[Acorn]

Dilaco, you have caused no offence.
I feel your frustration but I do not see where you lose the plot.

1. If you open my design file and copy and paste the Audio Player object into your design, can you do this?
2. If you drag and drop an MP3 audio track onto your design any accept either of the two options, can you do this?
3. Write down the MP3 filename somewhere (e.g., Adagio.mp3).
4. Now, crucially, delete the Xara Audio Player just created. It is not wanted or needed.
5. On your design page, can you type a Text Column for the Title of your MP3 file?
6. Can you then type into the Text Column's Web Properties > Link > Link to Web or Email address, the following - javascript: aplayer('Adagio.mp3');, replacing Adagio.mp3 with what you wrote down?
7. Click the Apply button.

You can repeat Steps 2 to 7 for as long as you have songs.

In my PDF:
Step 1 is described as if you were building your own Audio Player. As you have a working example, you need never touch any code whatso ever.
Step 2 is by passed to avoid Xara introducing unneeded code and graphics.
Steps 5 and on are just adding a Link to a bit of text.

If you just want a song to play and be controlled by just the Audio Player then you are done.
The rest of the PDF covers the very simply external controls you could use.
They allow for the Audio Player to be fully hidden so you could deliver a totally flexible presentation.

Good luck.

Acorn

[Acorn]

UPDATE

@Dilaco - It's a pity that you have problems with code and the Black colour of the Xara Audio Player

I have found a hack for a way to pause other Xara Audio Players on the page.
I previously advised a CSS code block to change the Player's colour scheme away from Black.

If you create a shape and add the following to its Placeholder Body:

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

then when you hit Play on any of them, the other Xara Audio Players will Pause.

Do not stack the Players too close to each other.

I put it into a shape Placeholder so it could be copied from page to page and design to design.
To work, the Placeholder need to be the top-most item on the MouseOff layer or in a higher Pop-up layer above the Audio Players.
I, myself, would just put the same code in Website Body and be done.

Acorn

[Dilaco]

Dilaco's given up for the moment, Acorn.

Thank you.

[Acorn]

Dilaco, last go. Here is a Xara Widget that I have built.

Do whatever you normally do for adding MP3s to that design page.
All you then need to is download MP3 - Adjustment.xar file, open it and copy and paste the widget onto your design page.


No explanation offered or needed; it has all been covered earlier.

Acorn
P.S. It might be easier for you, from your design page, to use File > Import > Action: locate 'MP3 - Adjustment.xar' > Open & Accept the Merge prompt.