Welcome to TalkGraphics.com
Page 3 of 8 FirstFirst 12345 ... LastLast
Results 21 to 30 of 75
  1. #21

    Default Re: Simple jukebox stopped working on iphone and ipad

    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

  2. #22
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Simple jukebox stopped working on iphone and ipad

    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.

  3. #23
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Simple jukebox stopped working on iphone and ipad

    Quote Originally Posted by Chris M View Post
    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
    Attached Files Attached Files

  4. #24
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Simple jukebox stopped working on iphone and ipad

    Works fine for me on my mobile.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #25

    Default Re: Simple jukebox stopped working on iphone and ipad

    Quote Originally Posted by Initiostar View Post
    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
    Click image for larger version. 

Name:	IMG_0480.jpg 
Views:	50 
Size:	102.4 KB 
ID:	129205Click image for larger version. 

Name:	IMG_0481.jpg 
Views:	51 
Size:	96.9 KB 
ID:	129206jonphilibert.xar

  6. #26
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Simple jukebox stopped working on iphone and ipad

    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.

    Click image for larger version. 

Name:	Player-iOS 14 Safari.jpg 
Views:	52 
Size:	139.2 KB 
ID:	129210


    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
    Attached Files Attached Files

  7. #27
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Simple jukebox stopped working on iphone and ipad

    I'm really liking this, Gary. It's simple, effective and very customisable.

    As soon as I can get rid of my day to day customers I'm going to burn the music websites I have and rebuild using this method.

    Go to the pub, grab a beer and pretend I bought it for you...cheers.

  8. #28

    Default Re: Simple jukebox stopped working on iphone and ipad

    I can't even begin to thank you enough for this. Pretty certain I'd never have been able to work it out - way above my pay grade (if I had one)! It's a great solution. I only have one query and I'm sure there's an obvious solution that I don't know. It works almost perfectly on my iphone (hurrah) and on other platforms, but on my ipad in Chrome it's missing the right hand side of the plugin window (see attached pic) (fine in Safari). The other thing is on the iphone and ipad the player shows "Error" before any music has been played, once you click something it's fine. Is there anything I can do about this as it's the same in Chrome and Safari on the ioS platforms I can check.

    Many thanks once again - I'd spent a lot of time and quite a lot of stress trying to find a solution but was obviously coming at it from the wrong start point (lesson learned).

    You were right about the template - its an old one from the Classic set (Wildside), thanks for the advice.

    Hilary

    Click image for larger version. 

Name:	IMG_0142.jpg 
Views:	51 
Size:	58.8 KB 
ID:	129218

  9. #29
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Simple jukebox stopped working on iphone and ipad

    Quote Originally Posted by hsinclair View Post
    I can't even begin to thank you enough for this. Pretty certain I'd never have been able to work it out - way above my pay grade (if I had one)! It's a great solution. I only have one query and I'm sure there's an obvious solution that I don't know. It works almost perfectly on my iphone (hurrah) and on other platforms, but on my ipad in Chrome it's missing the right hand side of the plugin window (see attached pic) (fine in Safari). The other thing is on the iphone and ipad the player shows "Error" before any music has been played, once you click something it's fine. Is there anything I can do about this as it's the same in Chrome and Safari on the ioS platforms I can check.

    Many thanks once again - I'd spent a lot of time and quite a lot of stress trying to find a solution but was obviously coming at it from the wrong start point (lesson learned).

    You were right about the template - its an old one from the Classic set (Wildside), thanks for the advice.

    Hilary

    Click image for larger version. 

Name:	IMG_0142.jpg 
Views:	51 
Size:	58.8 KB 
ID:	129218
    Well Hilary your afternoon just got better https://initiostar.co.uk/demo/jp/

    I looked at the old Xara template; it has a number of flaws which will catch you out sooner or later. Attached XAR is a remodelled template without Xara's hidden old-style traps. You should be able to change anything now and it works. Page width increased, narrow page border removed, page and pasteboard have a named colour.

    1. Is it just Chrome on iOS that is the problem; if so what is the iOS version(s)?

    2. On your iPhone /iPad do get the "error" only with Chrome? the code sets the start source as scr=" " (i.e. empty) there's a way around this (I think).

    I would use this XAR as your main site - it's has the embedded code.


    Gary
    Attached Files Attached Files
    Last edited by Initiostar; 24 March 2021 at 02:11 PM. Reason: Added XAR

  10. #30

    Default Re: Simple jukebox stopped working on iphone and ipad

    Quote Originally Posted by Initiostar View Post
    Well Hilary your afternoon just got better https://initiostar.co.uk/demo/jp/

    I looked at the old Xara template; it has a number of flaws which will catch you out sooner or later. Attached XAR is a remodelled template without Xara's hidden old-style traps. You should be able to change anything now and it works. Page width increased, narrow page border removed, page and pasteboard have a named colour.

    1. Is it just Chrome on iOS that is the problem; if so what is the iOS version(s)?

    2. On your iPhone /iPad do get the "error" only with Chrome? the code sets the start source as scr=" " (i.e. empty) there's a way around this (I think).

    I would use this XAR as your main site - it's has the embedded code.


    Gary

    Thanks for this, Gary, the Chrome version is still showing a cut off right hand side but only in the iPad, the Safari version is fine. Player “error” is still showing in both Safari and Chrome. The iOS version is 14.4.1.

    iPhone pic Click image for larger version. 

Name:	547FFFD0-60CF-4A42-ABC1-71F3DD3E906F.jpg 
Views:	101 
Size:	145.4 KB 
ID:	129223, iPad pic Click image for larger version. 

Name:	ED68BE23-F757-4E45-8C90-3509063943F8.jpg 
Views:	97 
Size:	98.0 KB 
ID:	129224

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •