-
Simple jukebox stopped working on iphone and ipad
I have a simple jukebox http://jonphilibert.com/jukebox.htm, created for a friend, with a js widget that has worked pretty well for some time and is still working on my desktop computer, however it no longer appears on my iphone or ipad. As it took a lot of searching to get one that worked in the first place I'd like to get it sorted if possible, it is quite old - jplayer.blue.monday. It has over 40 songs on it so quite a task to start again. The songs are uploaded and played from the website not a separate source and don't have images or videos, just the music. I'm now just getting the jukebox header showing but nothing else. Any ideas would be gratefully received.
Thanks
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Have just checked it on android phone and older iOS and it works fine so must be a problem with latest iOS. As it’s a jquery player I’m not sure if there’s anything I can do about it. Does anyone have a suggestion for a free audio player that would work instead, Flash obviously not an option.
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
hsinclair
Have just checked it on android phone and older iOS and it works fine so must be a problem with latest iOS. As it’s a jQuery (it player I’m not sure if there’s anything I can do about it. Does anyone have a suggestion for a free audio player that would work instead, Flash obviously not an option.
Hilary
You will likely have to switch to another player - there are lots of them to choose from; some have a free version but frequently the free versions are either limited in the number of tracks, or in the functionality provided (e.g. https://www.powr.io/plugins/music-player )
You are though welcome see if this demo works on Safari: https://initiostar.co.uk/demo/Jukebox/
Very basic at the moment, needs some CSS styling, but it works on Windows and Android. It may not autoplay in Safari, but it does on W10/Android.
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
I use a highly customisable multi track player. It certainly isn't a simple drag n drop widget though.
To see the different looks that can be achieved >>>auzlink.net.au<<<
-
Re: Simple jukebox stopped working on iphone and ipad
There are some great effects on your site Chris. I just looked at the OP's problem which was a fairly basic player implementation not working on Safari (and unlikely to do so again). Only objective was could I more or less replicate it, without the need to embed a media player, or write too much code.
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
There are some great effects on your site Chris. I just looked at the OP's problem which was a fairly basic player implementation not working on Safari (and unlikely to do so again). Only objective was could I more or less replicate it, without the need to embed a media player, or write too much code.
I totally agree. The one I use is daunting on first sight and not the easiest to manipulate on first, second and third sight.
I offered it up as Hilary said the original hadn't been altered in some time. My thoughts were tears, swear words and broken keyboards now, multi-player goodness for several years to come without having to revisit. Adding/subtracting tracks is easy, initial setup is a 5000 piece jigsaw puzzle of a brick wall at night.
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Chris M
I totally agree. The one I use is daunting on first sight and not the easiest to manipulate on first, second and third sight.
I offered it up as Hilary said the original hadn't been altered in some time. My thoughts were tears, swear words and broken keyboards now, multi-player goodness for several years to come without having to revisit. Adding/subtracting tracks is easy, initial setup is a 5000 piece jigsaw puzzle of a brick wall at night.
Sadly I think this would definitely be too daunting for me, I only do it for free for a colleague and although I love learning new things as a fairly long time retiree I find my brain starts fraying round the edges at the sight of so much to get my head round - don't think I have time for a 5000 piece jigsaw! I'm really grateful for the suggestions and suspect I'm going to have to keep on looking. My only concern is that although my particular 'jukebox' has stopped working, the one on the playlist jplayer on the jplayer.org website does still function on my iphone and ipad, so I suspect it's something I've done wrong that hasn't shown up until now. It can't just be a Flash issue or none of them would work.
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
What do you mean, too daunting? It's just a couple of lines of text in Codelanic.
Can you imagine opening up Notepad and thinking to yourself "I'll just knock up an audio player while the kettle boils" The code has 15354 characters in it.
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Chris M
What do you mean, too daunting? It's just a couple of lines of text in Codelanic.
Can you imagine opening up Notepad and thinking to yourself "I'll just knock up an audio player while the kettle boils" The code has 15354 characters in it.
Sorry - you lost me at 'Codelanic'. Think I need a lot more help!
Hilary
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
hsinclair
Sorry - you lost me at 'Codelanic'. Think I need a lot more help!
Hilary
Ha, sorry, my attempt at humour. The 'language' coders use is confusing to non native speakers. Hence the 'Codelandtic', much like Icelandic.
This script is indeed somewhat long and convoluted and not for someone who doesn't want to delve too deep.
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Chris M
Ha, sorry, my attempt at humour. The 'language' coders use is confusing to non native speakers. Hence the 'Codelandtic', much like Icelandic.
This script is indeed somewhat long and convoluted and not for someone who doesn't want to delve too deep.
Ha ha, I’m definitely a non native speaker... Although I used to use Dreamweaver, that was a while ago, hence the reason I use Xara for any websites and rely on its simplicity (although one of my sites is the biggest Xara help desk have ever seen!). I definitely am not into coding js, up until now have managed with copy and paste and adjusting where necessary. I still don’t know why the jplayer demo from their website works fine but not my version, I’ve obviously missed something out in the copy and paste which didn’t affect it previously but does now. Will keep on trying to amend either the original or something else I find. Thanks for the help.
Hilary
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Chris M
What do you mean, too daunting? It's just a couple of lines of text in Codelanic.
Can you imagine opening up Notepad and thinking to yourself "I'll just knock up an audio player while the kettle boils" The code has 15354 characters in it.
Sorry Chris, I used Notepad++.
Here is a Jukebox in 97 character per track, less the track name: Attachment 129168.
My tea also went tepid.
Acorn
-
Re: Simple jukebox stopped working on iphone and ipad
'Simple Jukebox'. A real native of Codeland would be horrified you applied the term 'simple' to a body of work. The whole language is based on Dr Seuss after a night out with the boys and should be completely alien to the rest of the world's population. 97 characters per track is no where near long enough, unless you are using the latest adaptation of Codelandic where it uses keystrokes not available on a qwerty keyboard.
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Acorn
Sorry Chris, I used Notepad++.
Here is a Jukebox in 97 character per track, less the track name:
Attachment 129168.
My tea also went tepid.
Acorn
Thanks, Acorn, will give it a go.
Hilary
-
2 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
hsinclair
Thanks, Acorn, will give it a go.
Hilary
Works very well Acorn: https://initiostar.co.uk/demo/jb/
I needed to use "void" in the playlist to make it work in Firefox javascript: void $('#player audio').attr('src', "index_htm_files/empty.mp3");
I added autoplay into the audio tag in conjunction with an empty.mp3 file - that way autoplay works immediately you hit the song.
For convenience, rather than drop the audio files into the "index htm files" I called them from my server.
e.g. javascript: void $('#player audio').attr('src', "https://initiostar.co.uk/demo/Infraction_-_Aurora.mp3");
Hilary's original problem was that the current Player will no longer work with the latest version of iOS 14.4.1
I can happily report your idea does.
Attachment 129175
I used a page width of 540px, Export Options/Scale-to-fit-Width maximum 900px. This way it will work across mobile and desktop.
One question I have is the native player renders quite small as you can see; height and width don't seem to have any effect (and I removed them from the audio tag). What is the best way to increase the rendered size?
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Personally, I would bin the Xara offering and use: <audio src="index_htm_files/empty.mp3" controls autoplay "/>
Place the player on the left of page and change the container to 540 x 108px.
Next in the Page Code (head):
<style>
#player audio {
width: 540px;
}
</style>
You then get the native HTML5 player for your browser, the width of the page.
Acorn
-
2 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Acorn
Personally, I would bin the Xara offering and use: <audio src="index_htm_files/empty.mp3" controls autoplay "/>
Place the player on the left of page and change the container to 540 x 108px.
Next in the Page Code (head):
<style>
#player audio {
width: 540px;
}
</style>
You then get the native HTML5 player for your browser, the width of the page.
Acorn
Great advice Acorn - Xara Media Player is in the bin! Had to use "audio{}" rather than "#player audio{}
Great solution for a simple player because you will always be using the browser's latest player: https://initiostar.co.uk/demo/Jukebox/
Attachment 129177
And! it works with iOS 14 - which hopefully helps the OP resolve their failing J Player.
Gary
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
Great advice Acorn - Xara Media Player is in the bin! Had to use "audio{}" rather than "#player audio{}
Great solution for a simple player because you will always be using the browser's latest player:
https://initiostar.co.uk/demo/Jukebox/
Attachment 129177
And! it works with iOS 14 - which hopefully helps the OP resolve their failing J Player.
Gary
You are welcome and thank you for building it. It really is clean, isn't it?
Acorn
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Acorn
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
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
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
-
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
-
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.
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Chris M
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.
Quote:
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
-
Re: Simple jukebox stopped working on iphone and ipad
Works fine for me on my mobile.
-
3 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
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
Attachment 129205Attachment 129206Attachment 129207
-
3 Attachment(s)
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.
Attachment 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
-
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.
-
1 Attachment(s)
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
Attachment 129218
-
1 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
hsinclair
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
Attachment 129218
Well Hilary your afternoon just got better :D 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
-
2 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
Well Hilary your afternoon just got better :D
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 Attachment 129223, iPad pic Attachment 129224
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
hsinclair
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
-
3 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Initiostar
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: Attachment 129232, landscape after clicking red button: Attachment 129233, 3rd gen iPad: Attachment 129234
-
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 :D
Gary
-
2 Attachment(s)
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/
Attachment 129236 Attachment 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
-
1 Attachment(s)
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 - Attachment 129240
-
3 Attachment(s)
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
hsinclair
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 -
Attachment 129240
Hilary,
Having embarked on this mission it would be a disappointment not to get it over the line :D
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
Attachment 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:
Quote:
<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
-
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
-
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
-
Re: Simple jukebox stopped working on iphone and ipad
Quote:
Originally Posted by
Acorn
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 :D
Gary
-
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