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

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.

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.

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:

Code:

---

<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:

Code:

---

<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

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.

Quote:

---

Originally Posted by 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.

---

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

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.

I apologise that some of my links were typed incorrectly.

Here is an example design, without the MP3s included: Attachment 134678
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

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.

Quote:

---

Originally Posted by 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.

---

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:

Code:

---

<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

@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.

Attachment 134686

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

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.

Quote:

---

Originally Posted by 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.

---

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

Quote:

---

Originally Posted by 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.

---

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.

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?

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: Attachment 134716.

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

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.”

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

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:

Code:

---

<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's given up for the moment, Acorn.

Thank you.

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 Attachment 134724 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.

The Xara Media Player has always been a bit quirky:

1. Here is an example where if one drags the MP3 onto a popup, the MP3 will correctly play AND pause when the popup closes (unlike the standard audio tag) >> https://initiostar.co.uk/demo/xaraAudio/ - this seems to work for v19 and Pro +

2. In Pro + (current version) you can drag and drop multiple MP3s to create a fairly simple Jukebox style plugin >> https://initiostar.co.uk/demo/xaraMedia-Player/ - the issue thereafter is that as one switches between tracks, each track pauses at its current position; you can overcome this with a reload command and probably other ways too.

3. Here is an example of Acorn's 2024 code variation that removes the need for a short blank MP3 (known as load.mp3 in earlier examples) >> https://initiostar.co.uk/demo/Audio-Player-24/

4. Here is a more creative plugin that adds additional descriptive content for each MP3 >> https://initiostar.co.uk/demo/AudioPageHolder/ - it shows the plug-in embedded into the main site and works for desktop and mobile.

All the above were first created as "plugins" with a 640px width and Scale-to-fit-Width. In the examples here, they would be published to a main website with a file name such as "audio-player"(not index) and called into the main website using a placeholder.

For [1] I cannot tell if it works for the perpetual licence v20, but all seems OK with Pro +

The original demo is here >> https://initiostar.co.uk/demo/Jukebox/

The Xara Media Player does generate errors that can be seen when you Inspect any site using it in a browser [ right click to tab Inspect ] but other than that it seems to work OK.

Quote:

---

Originally Posted by Initiostar

The Xara Media Player has always been a bit quirky:

1. Here is an example where if one drags the MP3 onto a popup, the MP3 will correctly play AND pause when the popup closes (unlike the standard audio tag) >> https://initiostar.co.uk/demo/xaraAudio/ - this seems to work for v19 and Pro +

2. In Pro + (current version) you can drag and drop multiple MP3s to create a fairly simple Jukebox style plugin >> https://initiostar.co.uk/demo/xaraMedia-Player/ - the issue thereafter is that as one switches between tracks, each track pauses at its current position; you can overcome this with a reload command and probably other ways too.

3. Here is an example of Acorn's 2024 code variation that removes the need for a short blank MP3 (known as load.mp3 in earlier examples) >> https://initiostar.co.uk/demo/Audio-Player-24/

4. Here is a more creative plugin that adds additional descriptive content for each MP3 >> https://initiostar.co.uk/demo/AudioPageHolder/ - it shows the plug-in embedded into the main site and works for desktop and mobile.

All the above were first created as "plugins" with a 640px width and Scale-to-fit-Width. In the examples here, they would be published to a main website with a file name such as "audio-player"(not index) and called into the main website using a placeholder.

For [1] I cannot tell if it works for the perpetual licence v20, but all seems OK with Pro +

The original demo is here >> https://initiostar.co.uk/demo/Jukebox/

The Xara Media Player does generate errors that can be seen when you Inspect any site using it in a browser [ right click to tab Inspect ] but other than that it seems to work OK.

---

Gary, thank you for working so hard on these.

1. Pop-ups auto-play as the user has manually selected it. A pop-up is different therefore to a page load, which browsers block the playing of any audio. It is possible the stopping of the audio when the pop-up closed is a (lock) layer feature that I have rarely used so didn't realise it did that. It might be a recent Xara change but I doubt it.
2. Track-switching was the original aim so only one audio stream was active. Until the JavaScript code I've just added, this was not a native function of the HTML5 Players; it could be done but was messy unless your only offered one Player and swapped in the audio tracks as you ably demoed.
3. Thank you for the rework here. I have found if you wrap the same with a <div> Tag that has an id, you are better placed to engage with the player through code and styling.

In [1], the original issue after many Posts was that @Dilaco didn't like the Xara colour scheme for its player. Hence my simple CSS. I couldn't be fussed in forking into old Xara styling to effect a total transform as the HTML5 Players are better across different browsers.

The following is probably just as a record what my discoveries: Attachment 134732
The file is 134kB when the Xara Players are involved and downloads over 600kB of data.
Cut them out and the file drops to 22kB and the download is 380kB; do note the audio files here are minute.
Importantly, the HTML5 Players are acting as lazy loaders. With the Xara Players, all the audio files are downloaded at once. Think what that might do to your website if you had 100 audio files to offer!
The HTML5 Players can also be resized and avoid the implicit jQuery addition.

Acorn