Media Player

[Acorn]

Chris, this will be a headscratcher but it can be developed to a greater or lesser extent: JSCSS - Multiple HTML5 Audio Players.xar; filesize is 5.71MB as 3 x MP3s are included.

It is a series of building blocks so feel free to move bits and check what changes.

Acorn

[Chris M]

Thank you Acorn, I'll have a good look at this today.

I enjoy learning these days, can't understand why it seemed so horrendous when I was at school.

[Boy]

Because what you're learning now is immediately applicable?

[Chris M]

Although this one of the better looking ones, it's still of a jukebox/playlist style.

However, and more importantly, I actually (nearly) understood how it all works. True, I have no clue as to the codelandic language in the page header, but I did understand why the different elements were needed and what role they played.

If it were a maths test, I would have a B+ in add ups.

[Acorn]

Although this one of the better looking ones, it's still of a jukebox/playlist style.
However, and more importantly, I actually (nearly) understood how it all works. True, I have no clue as to the codelandic language in the page header, but I did understand why the different elements were needed and what role they played.
If it were a maths test, I would have a B+ in add ups.

Chris, now you have confused me. You provided an image of multiple players and I built as close a facsimile. Earlier, I had suggested the use of a single Player with selectable Tracks.
The multi-player design I came up with will keep state of where any paused Track has reached and only plays one Track at a time.

What is missing?

Acorn

[Chris M]

Maybe nothing is missing. Maybe it's me that is missing something. Let me rephrase the 'it's still a playlist' to it's still a playlist...the way I tried it.

I'd like to try and work it out for myself as I'm clearly clumping all the tracks into one player (placeholder). I'm still playing and head scratching, like you said I would . I haven't given up yet, I have faith.

[Chris M]

I've worked out how to change the path to the audio files, which is quite important in this case.

Unless I'm still missing something, this is a playlist/jukebox style of player. In other words, one player, multiple tracks. For instance, if you want a block of text separating two genres then this won't do it as the tracks are in an array, you would need a separate page for each genre.

I've never played with Supersites, but I'm under the impression a Supersite will make separate pages appear to act as one with, for instance, vertical scrolling as an option. If so, this would be an answer presuming the changing of pages would kill off the previous page's player.

It may also be possible to have several 'named' players, but I'm wandering into the great unknown on my part with that theory.
Still happily playing and learning.

[Rychard]

Can someone just tell me how I can get a sound file to play when someone clicks on a picture? I know this is the wrong place to pose this question, but I cannot see how to start a thread.

[Chris M]

An elegant answer is to have the controls available for the visitor.

Clone your picture (ctrl+k)
Right click the clone and choose 'Web Properties'
Click 'Placeholder' > 'HTML Code (Body)' and paste the following code

<audio style="width:500px;height:60px" controls>
* * <source src="PATH TO YOUR AUDIO FILE.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

The results look like the image below.

[Acorn]

An elegant answer is to have the controls available for the visitor.

Clone your picture (ctrl+k)
Right click the clone and choose 'Web Properties'
Click 'Placeholder' > 'HTML Code (Body)' and paste the following code

<audio style="width:500px;height:60px" controls>
* * <source src="PATH TO YOUR AUDIO FILE.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

The results look like the image below.

Chris, my approach is a complete flip to yours.
Drag and drop your mp3 onto the design page and accept the Do not Autostart option.
This creates your audio controls placeholder.
In the body code of the placeholder include the phrase id="songX"

<audio id="weapon" class="xar_meplayer" id="songX" src="index_htm_files/chooseyourweapon.mp3" controls width = "100%" height="100%"/>

On the image, add a Link:

javascript: document.getElementById("songX").play();

"songX" can be any phrase, just ensure it is the same in the control and the link.

Clicking the actual image starts the audio.

Other shapes can have .pause() or .stop() and the audio control can be then hidden away.

Acorn