-
Re: Simple jukebox stopped working on iphone and ipad
Hilary, I have not downloaded the design file but code can be added in a couple of fashions:
- Web Properties > Website > HTML Code (head) <-- this for CSS scripts with <style> Tags. All appears just before the </head> Tag.
- Web Properties > Website > HTML Code (body) <-- usually JavaScript code with <script> Tags. All appears just before the </body> Tag.
- Web Properties > Page > HTML code (head) <-- this for CSS scripts with <style> Tags. My bet it the responsive IFRAME styling is here. All appears just before the </head> Tag.
- Web Properties > Page > HTML code (body) <-- usually JavaScript code with <script> Tags. All appears just before the </body> Tag.
- Web Properties > Placeholder > HTML code (head) <-- probably this one for CSS scripts with <style> Tags. All appears just before the </head> Tag.
- Web Properties > Website > HTML Code (body) <-- usually JavaScript code with <script> Tags and used for positioning of HTML content. Replaces the Placeholder with a DIV Tag wrapper and then your code/content, making it hierarchically sensitive.
Acorn
-
Re: Simple jukebox stopped working on iphone and ipad
Brilliant! Can’t believe I didn’t know know that.
Hope this is the final thank you!
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
hsinclair
Brilliant! Can’t believe I didn’t know know that.
Hope this is the final thank you!
Hilary
It would be good to see the final website up and running. Any residual issues just post here and I'm sure we can sort them out.
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Here it is - who would have believed how much effort went into something that looks so simple! My undying gratitude... I'm waiting to hear if he wants any changes! Have given up on the old Chrome/iPad version - there is a limit.
http://jonphilibert.com
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Well done for getting it operational Hilary =D>
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
-
2 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
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
Attachment 129299Attachment 129300
-
Re: Simple jukebox stopped working on iphone and ipad
great thread - really nice to see something work out this way... :)
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
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");
becomesjavascript: 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: Attachment 129307
Acorn
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
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
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
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
-
Re: Simple jukebox stopped working on iphone and ipad
@Acorn - think I have fixed it with your plugin : https://initiostar.co.uk/demo/jboxTest/jukebox.htm
Gary
-
2 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
@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 - Attachment 129313
Updated Main site - Attachment 129314
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
-
Re: Simple jukebox stopped working on iphone and ipad
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
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
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
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
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
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.
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
-
Re: Simple jukebox stopped working on iphone and ipad
Well it's finally a wrap - marathon with a sprint finish:-O
@Hilary
Quote:
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
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
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 :-bd 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.
-
Re: Simple jukebox stopped working on iphone and ipad
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
-
Re: Simple jukebox stopped working on iphone and ipad
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
-
Re: Simple jukebox stopped working on iphone and ipad
Quite right Gary, in a bit of a rush to get it up!
Thanks yet again...
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Feel like a complete idiot but have realised I don't know where I change the text to 'squares', I can see it in the html page source linked to "PLAYLIST" but don't know where it was added on the pplugin page, have checked all the various html code body options (as far as I can see) but no joy. By the way although it's a 'title' it doesn't work as a popup on any platform I'm using (PC, iPad and iPhone). It's all a learning experience!
Hilary
-
2 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Hilary
With the Text tool, highlight the word PLAYLIST, right click, pick Web Animation, MouseOver - Change Title. [ Ignore the fact that the STOP buttons are blue in the image just me experimenting with different buttons]
Attachment 129355
MouseOver has no effect on a Touch Device, other than when touched in this case, the text is highlighted blue. The title text will not show, whereas it does on a Windows Desktop.
If you don't think mouseover adds any value this way, remove the PLAYLIST null link and it will stay just as text (i.e. no mouseover).
The other change is the bio popup on the News page, desktop:
Attachment 129356
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Thanks Gary, have never used Web Animation, not sure I was aware of what it does. Bit deeper than I've probably needed to delve in the past, though it would probably have been useful if I'd known about it!
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Result Hilary =D> All looks good now at http://jonphilibert.com/news.htm
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
Took a while but got there in the end, have learnt a lot - thanks to Gary and Acorn :star :star.
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Thank You Gary, Hilary, and Egg. Ironically I have a country performer as well that needs a player. I’m not a coder, and it all looks way, way above my pay grade but I’ll start copying and pasting. @hsinclair Hilary what was your final bit of code. Or is this a straight plug in. I’m just dumb.
-Bill
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
bwood
Thank You Gary, Hilary, and Egg. Ironically I have a country performer as well that needs a player. I’m not a coder, and it all looks way, way above my pay grade but I’ll start copying and pasting. @hsinclair Hilary what was your final bit of code. Or is this a straight plug in. I’m just dumb.
-Bill
Bill, first things first, the player code that was implemented in Hilary's solution was the Audio Player Plugin v2 (that has been published in this thread along with how to embed the player within a main website). This is v3: https://initiostar.co.uk/demo/Jukebox/
There are though some basic principles that were deployed:
1. Think of an Audio Library where all the audio tracks are stored (on a hosted server in a common directory under the same domain name /assets folder) - this is the 'source'.
2. The way to access the 'source' is a via a link - this could be a song title from a list; it could be graphic (song/album cover) or anything that performs the function of a link.
Both the Audio Player ( and the Video Players) have considerable flexibility, so the questions are:
(a) what design do you have in mind? (b) how many song tracks? and (c) into what website (URL) do you want to add this plugin?
Short answers on a postcard ;)
I'm sure we can get you on the right track!
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Gary. Thanks for the reply. I’m looking at a very simple design with about 5-6 short clips. I’ve taken a look at your pinned notes https://initiostar.co.uk/demo/Jukebox/
The only thing I’m having trouble with is where to place the audio files in my hierarchy, and what code goes where. Once I make the placeholder, I need to know what goes in the <head> code, and what portion of you code goes in the <body> portion.
Thanks Gary
-Bill
-
Re: Simple jukebox stopped working on iphone and ipad
Gary. I tried to edit my post but server timed out. I now understand where the song clips will rest. Assets/host server.
Just a little unsure where all the pieces of code are supposed to reside.
I need a place for the script. And the placeholder (obviously where the player is supposed to be) so I got that. And placement of the iframe code. Thanks
-Bill
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
bwood
Gary. I tried to edit my post but server timed out. I now understand where the song clips will rest. Assets/host server.
Just a little unsure where all the pieces of code are supposed to reside.
I need a place for the script. And the placeholder (obviously where the player is supposed to be) so I got that. And placement of the iframe code. Thanks
-Bill
Bill
I have placed a note in the XAR design file: Attachment 129515
The note reads as follows:
PLACEHOLDER HTML code (body)
<audio id="audiplay" src="https://domain-name/assets/load.mp3" controls autoplay controlsList="nodownload" style="width: 500px;"></audio>
1. load.mp3 is a short 1second silent audio track - this is required for the native browser to validate it is a MP3 format file. The placeholder width should be the SAME as that in the Placeholder code. Height is not relevant, but I use 59px.
2. ‘assets’ is a directory into which the MP3s should be loaded, the name can be anything.
WEBSITE HTML Code (body)
<script>
var audio;
var source ='https://domain-name/assets/';
function aplayer(song){
var locate = document.getElementById('audiplay').setAttribute(' src', source + song);
audio=locate;
}
</script>
LINK TO EACH SONG
javascript: aplayer('song-title-filename.mp3');
IN-PLAY GREEN
javascript: audiplay.play();
PAUSE YELLOW
javascript: audiplay.pause();
STOP RED
javascript: aplayer('load.mp3');
You need a short silent MP3 load.mp3 Just download a copy if you don't have one.
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
PLACEHOLDER HTML code (body)
<audio id="audiplay" src="https://domain-name/assets/load.mp3" controls autoplay controlsList="nodownload" style="width: 500px;"></audio>
Though I have attempted to find more about controlsList="nodownload" I am still somewhat in the dark. If I want to allow downloads of audio files from my site would I leave out that code or use some other code?
Ian
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
IanB
Though I have attempted to find more about controlsList="nodownload" I am still somewhat in the dark. If I want to allow downloads of audio files from my site would I leave out that code or use some other code?
Ian
Ian,
Yes, leave out the code you highlighted in RED.
Tested here:Attachment 131815
Click on the player's 3 dots and will see a Download option.
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Thanks Gary
I have implemented your suggestion and downloads are now possible. Just 600 more instances of the code to change!
The problem was not apparent when I used Firefox as the browser and your fix didn't work with the slightly out of date version of Chrome I had installed. I suppose I should keep more up to date and check things regularly.
EDITED TO ADD : The three menu dots don't appear when the Firefox audio player is used. Is there a solution to this?
Many thanks,
Ian
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
IanB
Thanks Gary
I have implemented your suggestion and downloads are now possible. Just 600 more instances of the code to change!
The problem was not apparent when I used Firefox as the browser and your fix didn't work with the slightly out of date version of Chrome I had installed. I suppose I should keep more up to date and check things regularly.
EDITED TO ADD : The three menu dots don't appear when the Firefox audio player is used. Is there a solution to this?
Many thanks,
Ian
Ian,
Right click on the video when it is playing in Firefox; pick the option to 'Save Video As' and it will download - you could put a note on your site wrt Downloading from Firefox, or downloading in general. I'd check it in Safari too.
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
Ian,
Right click on the video when it is playing in Firefox; pick the option to 'Save Video As' and it will download - you could put a note on your site wrt Downloading from Firefox, or downloading in general. I'd check it in Safari too.
Gary
Thanks Gary
I'd come across the Save .... As option but wondered if there was a direct option. I shall definitely put some instructions on the site.
Thanks
Ian