Simple jukebox stopped working on iphone and ipad

[Initiostar]

Well done for getting it operational Hilary

There are some minor tweaks that I think could make it better. If you would like to take that additional step, it might be easier for me test them first rather than just dump them in a list here.

I would need your audio plugin and the main site XARs - if the additions work, I'll post them back to you with a few notes.

Come this far..... and it would be a good example of a pure Xara Jukebox!

Gary

[hsinclair]

Wow Gary, I certainly unwittingly started something - your are quite right the Jukebox is brilliant. I'm sure you're right about the tweaks, probably beyond what I would spot on my own.
Hilary

Audio-Plugin.xarJP4.xar

[handrawn]

great thread - really nice to see something work out this way...

[Acorn]

Hilary and Gary, I took the liberty of "improving" the Player, at least in my eyes.

There is no need to use jQuery:

javascript: void $('#player audio').attr('src', "http://jonphilibert.com/audio/i_got_the_blues_from_you_female.mp3");

becomes

javascript: document.getElementById('jpp').setAttribute('src', "http://jonphilibert.com/audio/i_got_the_blues_from_you_female.mp3");

This allows for multiple Players and Playlists.
void is not needed as it was jQuery causing the issue with Firefox - do check!

The Rollovers for the tracks were messy as three were missing.
I just turned all the grouped objects into a Text Area with magic bullets and bottom paragraph borders.

The entire Player all with no images whatsoever.
I embellished the Placeholder but as it is a Placeholder none of the imagery is actually rendered.
The Placeholder code is now:

<audio id="jpp" src="http://jonphilibert.com/jp/audio/load.mp3" controls autoplay controlsList="nodownload" style="width: 460px;" ></audio>

There is no other code anywhere else.
The id can be changed as can the width.


For the Playlist and controls, I used website Link Colours for the rollovers.
All the bullets stop a track so no need to jump to the top.

The design file is minuscule at 26kB: jQuery(-) - Audio-Plugin.xar

Acorn

[Initiostar]

Nice enhancement with the stop buttons, but still need the top page right hand control to bring the native player controls into view on a mobile : https://initiostar.co.uk/demo/jboxTest/jukebox.htm. Changed the plugin page width to 500px x 1300px.

Needed to sync the named colours and extend the length of the plugin page to 1300px (just too cramped on compact mobile). What's the quick to way get the playlist text and lines better distributed? (attached)

As you don't like images, I have upgraded the main site header with a new logo and text headline.

Late here now - will check all again tomorrow

Gary

[Chris M]

Just in case some future member thinks that there has to be a list and/or a single stop object. You can make multiple separate players, each with their own start/stop and place them anywhere on the page. Starting a different player auto-stops another player as well.

I'd like to either create custom controls, or do away with the browsers player altogether. Useful on long tracks/mixes, but not so much for clips or standard length tracks. The one shown in the picture is the Edge control bar, which doesn't match the rest of the stuff on the page.

[Initiostar]

@Acorn - think I have fixed it with your plugin : https://initiostar.co.uk/demo/jboxTest/jukebox.htm

Gary

[Acorn]

Just in case some future member thinks that there has to be a list and/or a single stop object. You can make multiple separate players, each with their own start/stop and place them anywhere on the page. Starting a different player auto-stops another player as well.

I'd like to either create custom controls, or do away with the browsers player altogether. Useful on long tracks/mixes, but not so much for clips or standard length tracks. The one shown in the picture is the Edge control bar, which doesn't match the rest of the stuff on the page.

Gary, custom controls...

These would need a bit of code.
Sticking with Hilary's requirement as a working example.

The Player
<audio id="jpp" src=source + 'load.mp3' controls autoplay controlsList="nodownload" style="width: 460px; display: none;" ></audio>
Basically, have it on the page, hide in in CSS or behind something.

---

Globals
var track;
var source = 'http://jonphilibert.com/audio/';

The Loader
function jpp(song) {
var trk = document.getElementById('jpp');
trk.setAttribute('src', source + song);
track = trk;
}

---

Link Code - Load and Play a Track
javascript: jpp('OneWeekendInThreePitch.mp3');

Link Code - Custom Pause Control
javascript: track.pause();

Link Code - Custom Stop Control
javascript: track.pause(); track.currentTime=0;
(track.stop(); does not work across browsers)

Link Code - Custom Play Control
javascript: track.play();
(After the Track as been loaded)
If autoplay were removed from the audio Tag, playing a Track would be: javascript: jpp('OneWeekendInThreePitch.mp3'); track.play();, something I wrote about way back.

I did a "version 3" but felt Hilary might be overwhelmed.
All my controls are non-image too!

Acorn