Simple jukebox stopped working on iphone and ipad

[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

[Initiostar]

@Hilary,

Just when you thought it was done and dusted we had another go! Updated main site with the new Acorn v2 audio plugin: https://initiostar.co.uk/demo/jboxTest/jukebox.htm (demo tracks do not play in Chrome/Edge - view in FF)

New Plugin v2 - JP-Audio-Plugin-2.xar

Updated Main site - JP5.xar

Summary of Changes

Audio Plugin
Incorporated Acorn's Audio Player v2 - this removes the need to use jQuery and added individual stop buttons for each track. Huge thank you to Acorn.

Main Site

1. Important: made the receiving Audio Plugin Placeholders the SAME height as the Audio Plugin PAGE height – this can be proportionally scaled thereafter; you would otherwise unintentionally create scrollbars.

2. Cosmetic: replaced the Low-Res Template Image Header (now editable), added an editable logo, replaced the Xara template menu (now same for Mobile & Desktop), made the YouTube and Face book links consistent and changed the old Xara template popup button to be consistent with the updated menu bar.

Looks good, I think now.

Best test all thoroughly your end.

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

[Initiostar]

Well it's finally a wrap - marathon with a sprint finish

@Hilary

Out of interest, I wondered why the link to 'View Jon's Background' on the news page only works on the word 'View' and not the other two words - on the main site not the mobile version?

My mistake, you should change it so it works correctly. There's no "I" in "Team" and I'm sure we have all been happy to help and contribute to a working solution. I have removed any Jon specific demo links, but will leave you with a scene from how we started several weeks back https://initiostar.co.uk/demo/Jukebox/ Try Song 4

@Acorn - thanks for the additional thoughts and they'll be tucked away along with the other goodies you've provided. I'm sure Chris M will be developing his own player now.

Gary