Welcome to TalkGraphics.com
Page 4 of 8 FirstFirst ... 23456 ... LastLast
Results 31 to 40 of 75
  1. #31
    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
    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 Attachment 129223, iPad pic Attachment 129224
    1. I understand you see the error message on load with iOS Safari and iOS Chrome. Please check my test here: https://initiostar.co.uk/demo/Jukebox/ - the error message should no longer appear?

    2. Cannot replicate the iPad error on an iPad Pro, but there is a known and current iOS Chrome bug that is affecting resizing in a browser. What is the iPad model (resolution)?

    3. Please check the behaviour of the RED & BLUE stop buttons

    Better I break and fix my test version rather than yours.

    Gary

  2. #32

    Default Re: Simple jukebox stopped working on iphone and ipad

    Quote Originally Posted by Initiostar View Post
    1. I understand you see the error message on load with iOS Safari and iOS Chrome. Please check my test here: https://initiostar.co.uk/demo/Jukebox/ - the error message should no longer appear?

    2. Cannot replicate the iPad error on an iPad Pro, but there is a known and current iOS Chrome bug that is affecting resizing in a browser. What is the iPad model (resolution)?

    3. Please check the behaviour of the RED & BLUE stop buttons

    Better I break and fix my test version rather than yours.

    Gary
    iPad is not new - 6th generation. Interestingly when I check your version the player looks fine to start with (no “error”) but once I start a track and then click the red stop button the Error message reappears on both iPad and iphone, not so if I click the pause button on the player itself. The right hand side of the player is still cut off both in landscape and portrait, the portrait version does not resize on the iPad and initially shows the mobile top of page arrow somewhere out to the right.

    Thanks for all this effort, very much appreciated. The main reason for using Xara rather than my original go to of Dreamweaver (quite a long time ago) was that it was supposed to be simpler and I didn’t need to get up to speed on latest versions of html, css, etc. The deeper recesses of Xara are clearly beyond me, even though I have been using it ever since it was first introduced in the UK (I still have all the old CD’s!).

    Have just checked, for interest, my old 3rd generation iPad, which still plays the original jplayer jukebox with no problem but replicated the current error on your jukebox, with a very basic player showing.

    Hilary

    Portrait iPad: Click image for larger version. 

Name:	E7FC9DD5-55DD-4E9D-B695-5E81322C77CB.jpg 
Views:	53 
Size:	79.2 KB 
ID:	129232, landscape after clicking red button: Click image for larger version. 

Name:	97BA1641-8C1C-4A33-9869-43795CBDCB96.jpg 
Views:	57 
Size:	72.2 KB 
ID:	129233, 3rd gen iPad: Click image for larger version. 

Name:	73D17CB1-D219-49F7-B729-2605AC83C4D7.jpg 
Views:	54 
Size:	73.4 KB 
ID:	129234
    Last edited by hsinclair; 25 March 2021 at 10:09 AM.

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

    Default Re: Simple jukebox stopped working on iphone and ipad

    Ok Hilary, I think we may be close to a fix for the error message. Can you confirm my player starts without error: https://initiostar.co.uk/demo/Jukebox/ and that the blue button stops an audio track - this stop blue/coloured button is just an option for convenience on a small size phone.

    Let's separate the two challenges, the off-centre iPad issue is not related to the player. I think it is more to do with the embedded iframe code working in older iPads - I have seen the same issue with video.

    Assuming the onload error message does not appear, please download (using Chrome in Windows) the empty.mp3 file from my player (right click 3 dots and download). Add this file to the same location as your songs.

    Then change the player placeholder code to <audio src="https://yourdomain/yourfolder/empty.mp3" controls autoplay></audio>

    Sorting out the player is first; whether we can sort out the older iPad rendering challenge is a different issue.

    It will worthwhile in the end when its working

    Gary

  4. #34
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Simple jukebox stopped working on iphone and ipad

    The error message seen over the audio player on start is fixed; had some friends test it on iPhone and iPad iOS 14.1, but we don't have an old iPad. The player was tested and the embedded version, in our remodelled Xara template, has been tested too. Please note that in the demo, in Chrome / Edge, cross-origin prevents the OP's tracks playing.
    https://initiostar.co.uk/demo/jp/

    Click image for larger version. 

Name:	iPhone11.jpg 
Views:	43 
Size:	134.8 KB 
ID:	129236 Click image for larger version. 

Name:	iPad iOS14.jpg 
Views:	49 
Size:	64.9 KB 
ID:	129237

    BRIEF EXPLANATION

    1. It has been an interesting exercise and challenge to accommodate the way different browsers manage the audio tag with on-start autoplay; one solution, without lots of code, is to create a short (in this case silent audio) track that provides the player with a valid source. You could use a short audio introduction to the playlist too.

    2. The image of the embedded player in older iPads distorting to the right in the OP's example is possibly (or not) related to a conflict with Xara's Scale-to-fit-Width being in use for the stand-alone player. In the updated demo, the iframe tag is styled and wrapped between <div> tags to maintain the aspect ratio of the embedded site. It may (or not) resolve the older iPad rendering issue. It might be that setting the placeholder H & W to fixed dimensions would work too (but haven't tried).

    The whole exercise of trying to build a simple player (which only started with this thread) has been one of seeing what could be achieved without dozens of lines of code, or the adoption of a 3rd party player. The OP's original player will not work on iOS14, really only two choices - get another 3rd party player that does, or have a go at making one.

    If anyone has an old iPad and can test the site that would help us to conclude this thread.

    Gary

  5. #35

    Default Re: Simple jukebox stopped working on iphone and ipad

    Well, you've really gone the extra mile on this one, Gary, I do hope you've got something out of it too. It all works perfectly apart from (inevitably, I guess) the Chrome iPad 6th gen version, see pic - it actually starts off central when loading but then jumps to the right - fine in Safari. The iPhone is also old - a 6s Plus but is fine. Maybe I'll just have to live with it and hope most people have upgraded their iPads, the player works fine, is just offset. Do I just have to add the Container code to the Head of the iframe tag, is there any other code I need to add - sorry, probably being very stupid here, alternatively is there an updated .xar file available - might be asking too much here, you have done such a lot already.

    It's been an interesting if stressful experience for me - the main lesson is that there are some very generous people out there willing to help. Once again, thank you - not sure what I would have done without your help.

    Hilary

    Ipad Chrome - Click image for larger version. 

Name:	IMG_0149.jpg 
Views:	53 
Size:	69.5 KB 
ID:	129240

  6. #36
    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
    Well, you've really gone the extra mile on this one, Gary, I do hope you've got something out of it too. It all works perfectly apart from (inevitably, I guess) the Chrome iPad 6th gen version, see pic - it actually starts off central when loading but then jumps to the right - fine in Safari. The iPhone is also old - a 6s Plus but is fine. Maybe I'll just have to live with it and hope most people have upgraded their iPads, the player works fine, is just offset. Do I just have to add the Container code to the Head of the iframe tag, is there any other code I need to add - sorry, probably being very stupid here, alternatively is there an updated .xar file available - might be asking too much here, you have done such a lot already.

    It's been an interesting if stressful experience for me - the main lesson is that there are some very generous people out there willing to help. Once again, thank you - not sure what I would have done without your help.

    Hilary

    Ipad Chrome - Click image for larger version. 

Name:	IMG_0149.jpg 
Views:	53 
Size:	69.5 KB 
ID:	129240
    Hilary,

    Having embarked on this mission it would be a disappointment not to get it over the line

    I have attached two XARs (updated editions). These are the basis of the full demo; the main site is the re-engineered Xara template. I would strongly encourage you to take this as your base site - the old Xara template has a design on the page layer which does not sit well with Scale-to-fit-Width and is very tricky to edit. I have also removed some other gremlins lurking in the background from your template.

    With the re-engineered template you can freely edit it, use the latest Xara features, without encountering the embedded page layout bug.

    For completeness let's go through the principles and code:

    1. The Jukebox [Audio Plugin] is just another website with its height and width (for convenience and portability) set to those that you want to use in the mobile variant.

    2. The 'buttons" that call the tracks can be whatever you like, including album covers (graphics); they are standard Xara constructs, but the benefit of having a MouseOver layer to them, is that on touch-based devices, the track playing is highlighted.

    3. The audio placeholder [in the Audio Plugin] should be wide enough to accommodate the browsers audio player - in this example I used 460px (w) x 59px (h).

    Here's the basics for the Audio Plugin (all of which are included in the Audio Plugin XAR

    Click image for larger version. 

Name:	Audio-Plugin.jpg 
Views:	57 
Size:	124.9 KB 
ID:	129243

    Remember to add the empty.mp3 file to your folder. You can download it here: https://initiostar.co,uk/demo/empty.mp3 or try a shorter empty track: https://initiostar.co.uk/demo/load.mp3 If you use load.mp3 just replace the code with this mp3 file.

    On your main site, I would make the embedded placeholder the same size as the incoming Audio Plugin. Where you to have a very long playlist the placeholder height might be shorter, but let's keep it straight-forward here:

    Code:
    <iframe src="pplugin.htm" name="playlist" height="100%" width="100%" style="border:none;"></iframe>
    name is optional but source MUST BE THE SAME filename from your Audio Plugin


    At this point you're done and dusted and everything should work as expected (but sorry to say not for your old iPad with a Chrome browser)


    The next step is not necessary, but was a test to see if I could overcome your old iPad issue which looks like the embedded Audio Plugin is trying to escape its placeholder.

    I used what is sometimes referred to as a "Responsive iframe"; a technique I use to create a full-browser width supersite-slider. In practise, it is a container/ wrapper designed to ensure the aspect ratio of its contents is maintained as the size of the placeholder changes; more useful for video.

    This code was placed in the main Website HTML(head)

    Code:
    <style>
    .container {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding-top:208.30%; /* Height divided by Width percentage - Aspect Ratio */
    }
    
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    </style>
    The embedded placeholder code then becomes:

    <div class="container">
    <iframe class="responsive-iframe" src="pplugin.htm"></iframe>
    </div>

    For me, it has been a very useful audio cross-browser test, so I'm pleased we have a working solution.

    Any problems let us know - it would be good to see your new site!

    Gary
    Attached Files Attached Files

  7. #37

    Default Re: Simple jukebox stopped working on iphone and ipad

    Looking very good Gary, and the iPad/Chrome version does play even though it is still being offset! Frustrating, but maybe we just have to call it a day on this and as I said before hope that most country music enthusiasts have newer iPads and don't use Chrome. I've noticed that it jumps to the right and leaves a wide white strip on the left, I can drag the player within the placeholder back slightly to the left but the right hand side of the player has been cut off, and it floats back to sit inside the player.

    Sorry - just a couple of final queries... Is there any way I can remove the three dots on the right of the player on the pc? It allows direct downloads of the music and I don't think Jon would be particularly happy about that as he sells his music and you couldn't do it with the old jplayer? Also can I make the player placeholder appear as one long list rather than having a scroll bar, which appears on the main pc version - it cuts off after "What's so right about the rain" on all the browsers I've tried, the player page looks fine when viewed on its own. I assume I need to extend the length of something? Of course on the Chrome iPad version no scroll bar appears so it isn't obvious there are more songs and I have to drag the player up to see the ones further down.

    Once again I can't thank you enough for your efforts, I hate having to keep bothering you but have no idea how I'd sort this on my own!

    Hilary

  8. #38
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Simple jukebox stopped working on iphone and ipad

    Hilary, I hope you do understand truly how much effort Gary has put into all this. I provided the mechanism but he has ploughed through your difficulties turning an acorn into a full oak tree.

    I have looked at jPlayer and it is a fine product. It requires jQuery v2.0 or above and Xara still only offers v1.11.1!
    I can explain how to load a fresher jquery.js library.

    The simplest block for mp3 downloads is to add controlsList="nodownload" to the audio Tag:
    <audio src="http://jonphilibert.com/jp/audio/load.mp3" controlsList="nodownload" controls="" autoplay=""></audio>

    You can still "download" anything that is being played and I am sure that jPlayer has an similar option in its playlistOptions.
    Regardless, if I can find index_htm_files/BackInWaycrossBandPitch.mp3, I can download it.
    You would be safer to only offer up extracts if you wish to preserve sales. The analogy is any image you publish, someone can steal.

    You need to to be explicit that the songs are copyright and that they are only available for personal listening though Jon's largesse and not for copying, downloading for saving on any other platform or media.
    You should offer a link to a purchase route.

    Gary offered up a vertical list but you can add the links to anything.
    I would consider a useful small graphic (https://pixabay.com/vectors/search/music/) and have a rollover of the track's title.
    Easy to add 40+ graphics in a smaller area.

    Sorry to be harsh but you must consider your client's livelihood as prime.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    Default Re: Simple jukebox stopped working on iphone and ipad

    Quote Originally Posted by Acorn View Post
    Hilary, I hope you do understand truly how much effort Gary has put into all this. I provided the mechanism but he has ploughed through your difficulties turning an acorn into a full oak tree.

    I have looked at jPlayer and it is a fine product. It requires jQuery v2.0 or above and Xara still only offers v1.11.1!
    I can explain how to load a fresher jquery.js library.

    The simplest block for mp3 downloads is to add controlsList="nodownload" to the audio Tag:
    <audio src="http://jonphilibert.com/jp/audio/load.mp3" controlsList="nodownload" controls="" autoplay=""></audio>

    You can still "download" anything that is being played and I am sure that jPlayer has an similar option in its playlistOptions.
    Regardless, if I can find index_htm_files/BackInWaycrossBandPitch.mp3, I can download it.
    You would be safer to only offer up extracts if you wish to preserve sales. The analogy is any image you publish, someone can steal.

    You need to to be explicit that the songs are copyright and that they are only available for personal listening though Jon's largesse and not for copying, downloading for saving on any other platform or media.
    You should offer a link to a purchase route
    . (1)

    Gary offered up a vertical list but you can add the links to anything.
    I would consider a useful small graphic (https://pixabay.com/vectors/search/music/) and have a rollover of the track's title.
    Easy to add 40+ graphics in a smaller area.


    Sorry to be harsh but you must consider your client's livelihood as prime.

    Acorn
    Thanks Acorn,

    1. We are on the same page with the download :https://initiostar.co.uk/demo/jp/pplugin (amended the player to exclude Chrome download). I as can anyone, can re-record any audio direct from the desktop. Limited protection is to place them on the server, but in reality if someone is determined not to play fair it is quite difficult to maintain protection. Some sites, place a background copyright audio overlay, but that's just as irritating as hearing a reduced quality mp3. The main site can have a play fair statement to discourage blatant copying.

    2. Removing the scroll-bar on the main site placeholder: use the standard iframe tag we started with (below), That is: remove the responsive iframe code from the website HTML (Head) and replace the <div>......</div> in the main placeholder. You only need the standard code now.

    Code:
    <iframe src="pplugin.htm" name="playlist" height="100%" width="100%" style="border:none;"></iframe>
    Should look like: https://initiostar.co.uk/demo/jp/jukebox.htm

    3. I agree Acorn, the links could be anything - in this case I simply followed the previous format - as we know this works now, a second step could well be the addition of graphics, or video.

    4. The infamous old iPad and Chrome - I would start by checking you have the latest Chrome browser on the iPad. But treat these are separate issues - get the thing working first.

    Having embarked on this mission, we are close to the finishing line

    Gary

  10. #40

    Default Re: Simple jukebox stopped working on iphone and ipad

    Again, many thanks Acorn and Gary.

    I'm now going to appear extremely stupid and am very embarrassed to be bothering you again (you must be really sick of me) but I can't see how to remove the responsive iframe code from the website html head as Gary suggests. I can see the responsive-iframe code in the HTML(head) when I view the page source but not how it was put there as the only placeholder I have on the page is the the jukebox placeholder and the only code applied to that is the code you suggested which I have put in the HTML(body) is this right? Doesn't appear to get rid of the vertical scroll bar but it isn't the end of the world, I just wondered what I was doing wrong.

    I do understand that anything can be downloaded if someone is determined enough. In fact the sales are sheet music/royalties as the online songs are demos - other people actually record and sell the songs - and Jon has been happy enough up until now and had expressed a preference for less graphics, not more. I will suggest the copyright notice to him. Your "nodownload" help is great and very much appreciated.

    As I said a while back this is way beyond what I could have hoped for in terms of help. To be honest I was thinking I'd just have to suggest to Jon he either had to pay for a playable jukebox or get someone else to to a quite possibly better job than me (although as I don't charge he'd have to pay more anyway!).

    I'm going to let the Chrome iPad thing take a back seat, I do have the most recent version - automatic update, if I hadn't checked it on my iPad in the first place I'd never have known it didn't work! I do this website and others I maintain as a favour and just do my best.

    I am immensely grateful to you for all of this you have been brilliant - thanks again.

    Currently the website appears on http://jonphilibert.com/jp/jukebox.htm. Will upload it later to replace the jplayer original.

    Hilary

 

 

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
  •