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

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

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

[Acorn]

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: MP3 Jukebox.xar
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