Simple jukebox stopped working on iphone and ipad

[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

[hsinclair]

Gary, Acorn

This is quite superb (I do know the feeling of wanting to tweak when you can see things that could be done better!). It really is a great improvement.

Just a couple of queries/points - not entirely sure if know how to add and remove tracks from the playlist in the Audio Plugin, just copied, pasted and amended the widget code previously. Also I might not be the only person who tried clicking on the magic bullet to start the track, even though I knew it was a stop button - it isn't actually obvious and clicking the bullet does trigger the empty 'load.mp3' for 2 seconds so it looks as if something is actually going to play and then nothing happens. Should I leave the 'usesJQuery' reference on the top of the jukebox page?

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? Not an issue, just interested. By the way it isn't that I don't like images, I just went along with Jon's stated preference and to be honest with all the changes I'm not quite sure how I'd add them now anyway, Jon doesn't have record covers so it would have to be something generic.

Once again I can't thank you enough for your efforts, I am guessing (hoping) you found it an interesting exercise a well as taking pity on someone who obviously didn't know what she was doing!

Have uploaded your version - feel I should be giving you a credit somewhere...

Thanks again
Hilary

[Acorn]

Gary, Acorn

This is quite superb (I do know the feeling of wanting to tweak when you can see things that could be done better!). It really is a great improvement.

Just a couple of queries/points - not entirely sure if know how to add and remove tracks from the playlist in the Audio Plugin, just copied, pasted and amended the widget code previously. Also I might not be the only person who tried clicking on the magic bullet to start the track, even though I knew it was a stop button - it isn't actually obvious and clicking the bullet does trigger the empty 'load.mp3' for 2 seconds so it looks as if something is actually going to play and then nothing happens. Should I leave the 'usesJQuery' reference on the top of the jukebox page?

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? Not an issue, just interested. By the way it isn't that I don't like images, I just went along with Jon's stated preference and to be honest with all the changes I'm not quite sure how I'd add them now anyway, Jon doesn't have record covers so it would have to be something generic.

Once again I can't thank you enough for your efforts, I am guessing (hoping) you found it an interesting exercise a well as taking pity on someone who obviously didn't know what she was doing!

Have uploaded your version - feel I should be giving you a credit somewhere...

Thanks again
Hilary

Hilary

To add a track

• Use the Text Tool and position the cursor at the end of a line and press the Enter key
• Type in the new Title
• Highlight the new Title and add the Link code of form javascript: document.getElementById('jpp').setAttribute('src', 'song.mp3');
• The magic bullet is added automatically with the stop code

To add a track

• Use the Text Tool and highlight an entire Track and press the Delete key

Magic Bullet

• It actually has title text of "Stop", which appears as a pop-up on hover.
• I would change the circle to a white square

View Jon's Background

• This works on the file from Gary.
• The Layer biogmain is incorrectly under the MouseOver Layer, if that helps.

Acorn

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

Attachment 129311

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

[Chris M]

I'm sure Chris M will be developing his own player now.

Gary

Already swapped the coding side of things on all 4 of the sites that had my original multi-player I'm currently playing with the looks/design/skinning. I've employed Acorn's 'display: none' to hide the playhead, but not yet delved into creating a custom one.

The last project I became all enthusiastic about was the Toggle Button. That was an Initiostar and Acorn project as well.

[hsinclair]

Good reminder, Gary, love song 4 and the calming seascape!

Thanks again for all your and Acorn's efforts. Shortened the sound file so the player doesn't show it running an empty file. Moved the files to their original site and once I'd corrected all the links it is brilliant.

Enjoy you Easter holiday

Hilary

[Initiostar]

Hilary

All looks good @ http://jonphilibert.com/

Couple of corrections required: (1) News page desktop variant > link to Jon's Background should be to the popup layer 'biogmain' not to the the page itself (as in the mobile variant) and (2) very minor - Jukebox page Playlist mouse over change text to 'squares' from 'circles'.

Gary

[hsinclair]

Quite right Gary, in a bit of a rush to get it up!

Thanks yet again...

Hilary