Simple jukebox stopped working on iphone and ipad

[Initiostar]

You are welcome and thank you for building it. It really is clean, isn't it?

Acorn

Very clean and easy to manage Acorn. Is it not always the case that a well thought idea with just a few lines of codes is a good starting point? I'm reminded that the foundation of the 'superslider' rests on just one line of code and last weeks 'inner zoom' does not have many more.

I had a play with one of your other creations: "JS - Alternative to Xara Audio Player.xar". It has a great hover zoom/focus on the player with a shadow background. Caution had the better of me - having strived to get the Jukebox working on iOS 14.

Gary

[Acorn]

Very clean and easy to manage Acorn. Is it not always the case that a well thought idea with just a few lines of codes is a good starting point? I'm reminded that the foundation of the 'superslider' rests on just one line of code and last weeks 'inner zoom' does not have many more.
I had a play with one of your other creations: "JS - Alternative to Xara Audio Player.xar". It has a great hover zoom/focus on the player with a shadow background. Caution had the better of me - having strived to get the Jukebox working on iOS 14.
Gary

I suppose I've always liked a challenge.

Acorn

[hsinclair]

This is brilliant, I'd just prefer to have the width of the player and song titles a bit less than the full width of the page, however if I do this and try it on the mobile width (on any platform, even dragging it to narrow on a PC) the controls for play/pause and the volume stop responding, I haven't set it to a specific width. The full width one in your version is fine so what am I missing? Sorry to appear rather dim on this!
Hilary

[Chris M]

If you go to Web Properties > Page (tab) > HTML Code (Head), you can alter the width of the player.
Draging the size of the 4 title bars works without doing anything special.

[Initiostar]

If you go to Web Properties > Page (tab) > HTML Code (Head), you can alter the width of the player.
Dragging the size of the 4 title bars works without doing anything special.

the controls for play/pause and the volume stop responding

Hilary,

If we are talking about the latest player Acorn and I constructed (not earlier versions) https://initiostar.co.uk/demo/Jukebox/, the native player controls (for whichever browser choice you have selected) should all work.

The red horizonal line might be misleading - it stops the audio completely so my "pause" button symbol should probably be different (e.g. a stop sign maybe).

The player list is made from simple buttons each with a song link; these buttons can be anything you want. The links to the songs (in my version call the song from my server). This could be your server with your songs, or you can drop the songs into your local folder and have them publish along with the website.

If you get stuck (and we are talking about my version), post your XAR file and we can sort it out. There is also a notes tab in the XAR which I have now published in the demo.

Gary

[Egg Bramhill]

Works fine for me on my mobile.

[hsinclair]

Hilary,

If we are talking about the latest player Acorn and I constructed (not earlier versions) https://initiostar.co.uk/demo/Jukebox/, the native player controls (for whichever browser choice you have selected) should all work.

The red horizonal line might be misleading - it stops the audio completely so my "pause" button symbol should probably be different (e.g. a stop sign maybe).

The player list is made from simple buttons each with a song link; these buttons can be anything you want. The links to the songs (in my version call the song from my server). This could be your server with your songs, or you can drop the songs into your local folder and have them publish along with the website.

If you get stuck (and we are talking about my version), post your XAR file and we can sort it out. There is also a notes tab in the XAR which I have now published in the demo.

Gary

Well, I'm nearly there. Your version works perfectly on all platforms, so I copied and pasted the player into my Jukebox page, linked some songs to it and hey presto it works... apart from on my iphone in portrait mode it still loses the pause button! Fine in landscape and everywhere else, I'm clearly missing something obvious but as it seriously isn't my area of expertise I don't know where to look so if you could help I would be enormously grateful. Attaching pics from my iPhone of the two jukeboxes (your's and mine) and also my Xar file. I recreated the website from scratch as I didn't want to copy and paste errors from the existing one and have uploaded the new version online - jonphilibert.com/jp/jukebox.htm. Really sorry to appear so slow on this!
Hilary
jonphilibert.xar

[Initiostar]

OK Hilary, I think this is where you would like to get to; a few style changes maybe, but we can work through the principles:

Note in the example that follows, in Chrome, only the first song plays. This is cross-origin issue where I used your http location for the songs and Chrome objects. I could have added code to resolve the conflict, but that would add unnecessary confusion at this stage. It works fine in Firefox & Safari.




1. Your site with an "embedded player": https://initiostar.co.uk/demo/jp/jukebox.htm

2. Your free-standing player: https://initiostar.co.uk/demo/jp/pplugin.htm

3. For practical design purposes, it makes better sense to have one version of the player and to embed that into both your desktop and mobile variants; easier to update and maintain, portable and independent from the main site.

4. The embedded player is just another website with a page width to suit the design of your player, anything from 480px to around 540px works - remembering the same player needs to work in a mobile format.

5. You give this embedded player website a filename (other than "index") - in this case I chose "pplugin". Xara usually warns you not to do this for good reasons, but in this case, the call to that page is made from within your website. You PUBLISH this design document to the SAME directory as your MAIN site > IMPORTANT!

6. The XARs attached are for your site and the plugin - look at the placeholder code and (hopefully) this will be clear - ALSO note the style code in the Website HTML (Head) - this sets the width of the native player and should be the same as the player's placeholder width,

Design Process

7. There was a redundant Xara player at the top of the demo design page (this should have been binned, but I left it there for further testing). The actual player in the demo was just below it, so apologies for not making it more obvious.

8. The reason we adopted the standard audio tag is browser independence; therefore when your site opens, a visitor will see the browser's native audio controls - these will always be more up-to-date that any third party player.

See how you get on, but I would suggest your start point is these new XARs.

Footnote: your main site looks like an old Xara template; it had an overly complicated pasteboard design which I took the liberty of removing - it would be relatively simple to update the template to work correctly with Scale-to-fit-Width too.

Gary