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