The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Why does this playlist code work fine on only about half the browsers/platforms/html test sites?
SWLinPHX
post Jun 30 2018, 11:56 PM
Post #1





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



I have tested this code on three different test sites using three different browsers on two different MacOS versions. It works perfect on some and not at all on the others. I even tried an alternate manual playlist code wizard using SCM Player at https://scmplayer.co/ but the embed code that produced works nowhere. Anyway, here is the code that works half the time (placed within the tags). Any help would be greatly appreciated! smile.gif

Here is a link to the web page to see if works (plays music) on your browser or platform; maybe you can extract the code from there if necessary: Here is a link to the web page to see if works (plays music) on your browser or platform; maybe you can extract the code from there if necessary: http://rvratptcavailability.x10host.com/afhsclassof1986/

CODE
<script type="text/javascript">
var numberOfSongs = 26
var sound = new Array(numberOfSongs+1)
sound[0]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Rio.mp3"
sound[1]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Alive%20And%20Kicking.mp3"
sound[2]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Key%20Largo.mp3"
sound[3]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Come%20On%20Eileen.mp3"
sound[4]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Tainted%20Love.mp3"
sound[5]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Everybody%20Wants%20You.mp3"
sound[6]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Eyes%20Without%20A%20Face.mp3"
sound[7]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Hungry%20Like%20The%20Wolf.mp3"
sound[8]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/I%20Ran%20%28So%20Far%20Away%29.mp3"
sound[9]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/If%20I%27d%20Been%20The%20One.m4a"
sound[10]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/It%27s%20My%20Life%20%5BTalk%20Talk%5D.mp3"
sound[11]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Let%27s%20Go%20%5BWang%20Chung%5D.mp3"
sound[12]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Obsession.mp3"
sound[13]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/On%20The%20Dark%20Side.mp3"
sound[14]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/The%20Other%20Guy.mp3"
sound[15]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Promises%20Promises.mp3"
sound[16]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Rock%20Me%20Amadeus.mp3"
sound[17]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/The%20Safety%20Dance.mp3"
sound[18]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/She%27s%20A%20Beauty.mp3"
sound[19]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Somebody%27s%20Baby.m4a"
sound[20]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Someday%20%5BGlass%20Tiger%5D.mp3"
sound[21]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Vacation.m4a"
sound[22]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Whisper%20To%20A%20Scream%20%28Birds%20Fly%29.mp3"
sound[23]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/What%20Is%20Love_.mp3"
sound[24]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/Take%20It%20Easy%20On%20Me.mp3"
sound[25]= "http://rvratptcavailability.x10host.com/afhsclassof1986/highschoolflashbacksongs/The%20Old%20Man%20Down%20The%20Road.mp3"
function randomNumber(){
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){    randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
    return randomLooper
}
var randomsub = randomNumber()
var soundFile = sound[randomsub]
document.write ('<EMBED src= "' + soundFile + '" hidden=true type="audio/mpeg" autostart=true loop=true>')
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 1 2018, 05:27 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Maybe the browsers don't have a plugin for the EMBED element (Flash is rarely supported these days)? In that case, try creating an AUDIO element instead of EMBED: https://developer.mozilla.org/en-US/docs/We...L/Element/audio

There might also be some bug related to creating the audio player with document.write.

Or maybe javascript/plugins/audio is disabled by the individual browsers.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SWLinPHX
post Jul 1 2018, 07:00 AM
Post #3





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



Thanks for your response but I'm not sure I am experienced enough to understand. Using "embed" automatically means it's using Flash? If so I didn't know that. I do know Flash is archaic however so if this code relies solely on Flash then I understand. I didn't know that "document.write" could be an issue (don't know exactly what that does anyway, LOL). I will look at your link when I get a chance and see if that helps.

I was hoping someone could just copy the code for me and paste the new code with the changes to make it work using the files I have listed (hosted) in the code. I spent hours all day yesterday on it researching and trying alternates (like SCM Player which did nothing after I spent an hour going thru the whole wizard and entering my file URL's and other data).

This post has been edited by SWLinPHX: Jul 1 2018, 07:02 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SWLinPHX
post Jul 1 2018, 07:03 AM
Post #4





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



...by the way, did you try loading the page in one or more browsers on your platform and OS and did music play for you?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SWLinPHX
post Jul 1 2018, 07:32 AM
Post #5





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



Okay, I looked at your link and I am somewhat familiar with the code shown. However I would still need it to work as a randomizer using several files that play randomly when the page is loaded so I don't know how or what part I would remove or substitute to make it work still with the current code I posted above. Do I keep it all exactly the same except just replace the following line of code:

CODE
document.write ('<EMBED src= "' + soundFile + '" hidden=true type="audio/mpeg" autostart=true loop=true>')


...with something like this, using ' + soundFile + ' still, or am I misunderstanding?

CODE
<audio controls autoplay loop>
        <source
            type="audio/mpeg"
            src="' + soundFile + '"/>
        Your browser does not support the <code>audio</code> element.
    </audio>



This post has been edited by SWLinPHX: Jul 1 2018, 07:41 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 1 2018, 01:42 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(SWLinPHX @ Jul 1 2018, 02:00 PM) *

Using "embed" automatically means it's using Flash?

No, it's up to the browser what to use. But maybe there's no replacement plugin installed/available.

QUOTE
I didn't know that "document.write" could be an issue (don't know exactly what that does anyway, LOL).

It prints out content on the fly while the page is loaded. A bit archaic. Should work, but who knows...

QUOTE
I was hoping someone could just copy the code for me and paste the new code with the changes to make it work using the files I have listed (hosted) in the code.

I tested the script you posted and it seems to produce the expected HTML.

QUOTE(SWLinPHX @ Jul 1 2018, 02:03 PM) *

...by the way, did you try loading the page in one or more browsers on your platform and OS and did music play for you?

Firefox61/Win10 worked.
Edge42/Win10 worked.
IE11/Win10 didn't work.*
Vivaldi (Chromium-based) didn't work.*

* Maybe I've disabled something, can't remember.

QUOTE(SWLinPHX @ Jul 1 2018, 02:32 PM) *

Do I keep it all exactly the same except just replace the following line of code:

CODE
document.write ('<EMBED src= "' + soundFile + '" hidden=true type="audio/mpeg" autostart=true loop=true>')


...with something like this, using ' + soundFile + ' still, or am I misunderstanding?

CODE
<audio controls autoplay loop>
        <source
            type="audio/mpeg"
            src="' + soundFile + '"/>
        Your browser does not support the <code>audio</code> element.
    </audio>


Yes, but it must all on the same line in the document.write(), no linebreaks.

I must add that it can be extremely annoying when web pages start to autoplay sounds. I always keep speakers turned off because of that...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 1 2018, 02:55 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



There are no line breaks in the document.write(). There is a space before the first parenthesis though. I've always thought that was a no-no, but it seems to work. Is it just a convention to write the method name together with the parenthesis without whitespace? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 1 2018, 03:44 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Jul 1 2018, 09:55 PM) *

There are no line breaks in the document.write().

No I meant the AUDIO example.

QUOTE
There is a space before the first parenthesis though. I've always thought that was a no-no, but it seems to work. Is it just a convention to write the method name together with the parenthesis without whitespace? unsure.gif

Good catch. No idea.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SWLinPHX
post Jul 1 2018, 04:43 PM
Post #9





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



First of all thanks so much for your help guys -- I can't tell you how much I appreciate it as I am arranging and paying for this event almost single-handedly, including Facebook Page, websites, correspondence, payments and all physical stuff as well!

I'm not completely clueless but this code worked for me fine on all browsers less than two years ago if that helps. So it could be some sites are using Flash. What is weird is that I am using three test sites: https://www.w3schools.com/html/tryit.asp?fi...e=tryhtml_basic and http://www.play-hookey.com/htmltest/ and http://htmledit.squarefree.com/. On Safari this code doesn't seem to work on any of the test sites in the latest MacOS but then right now Safari is acting very slow and weird. On Firefox all test sites work and on Chrome all work except w3schools.com. Frustrating.

So to be clear are you saying I need to remove the space before the parentheses and change the first code from this:

CODE
document.write ('<EMBED src= "' + soundFile + '" hidden=true type="audio/mpeg" autostart=true loop=true>')

to this:

CODE
document.write('<EMBED src= "' + soundFile + '" hidden=true type="audio/mpeg" autostart=true loop=true>')

and the second code from this:

CODE
<audio controls autoplay loop>
        <source
            type="audio/mpeg"
            src="' + soundFile + '"/>
        Your browser does not support the <code>audio</code> element.
    </audio>

to this:

CODE
<audio controls autoplay loop> <source  type="audio/mpeg" src="' + soundFile + '"/> Your browser does not support the <code>audio</code> element </audio>


I will try those and report back. By the way, here is where I based the initial code from.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SWLinPHX
post Jul 1 2018, 04:52 PM
Post #10





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



Okay, as I suspected I tried both and the first code fix (removing space before parenthesis) still doesn't work on the https://www.w3schools.com/html/tryit.asp?fi...e=tryhtml_basic test site in Chrome (and Safari?), and I'm assuming if I can get it to work there it will work virtually anywhere. At least I'll be more confident.

The second code fix using the HTML5 audio doesn't work at all with my playlist randomizer code. Are you sure that is the correct code to get audio to play in the randomizer, using this element:
CODE
src="' + soundFile + '"/>

The HTML5 audio does work if I just use a single song to play however using a direct single song file URL instead of "'soundFile'", as I am also using it on another current site of mine.

Can either of you get it to work at the https://www.w3schools.com/html/tryit.asp?fi...e=tryhtml_basic test site, in more than one browser?

...or, do you know the correct randomizer code for a full playlist of 26 songs like I have using the HTML5 audio method?

This post has been edited by SWLinPHX: Jul 1 2018, 05:08 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 1 2018, 05:43 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(SWLinPHX @ Jul 1 2018, 11:43 PM) *

I'm not completely clueless but this code worked for me fine on all browsers less than two years ago if that helps.

That does sound like something changed with those browsers, like the EMBED support or some browser plugin/multimedia setting. Have you tried just your own computer/browser, or others as well?


QUOTE
and the second code from this:

CODE
<audio controls autoplay loop>
        <source
            type="audio/mpeg"
            src="' + soundFile + '"/>
        Your browser does not support the <code>audio</code> element.
    </audio>

to this:

CODE
<audio controls autoplay loop> <source  type="audio/mpeg" src="' + soundFile + '"/> Your browser does not support the <code>audio</code> element </audio>

No you need the document.write around it as well, just like in the EMBED example:

CODE
document.write('<audio controls autoplay loop> <source  type="audio\/mpeg" src="' + soundFile + '"> Your browser does not support the <code>audio<\/code> element <\/audio>');

(I also escaped the slashes with backslashes, not sure if it's necessary).

QUOTE
The HTML5 audio does work if I just use a single song to play

Does EMBED work with a single song (and no javascript)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SWLinPHX
post Jul 1 2018, 06:32 PM
Post #12





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



I'm not sure what you mean by trying "my own computer/browser" (you mean just loading like the index.html file from my desktop into a browser? ...if so, that works).

However, the final code you gave me actually works now!!! It works on all three test sites and on all three browsers. You don't know how long I've been working on this. Thank you, thank you, THANK YOU!!! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 1 2018, 07:05 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(SWLinPHX @ Jul 2 2018, 01:32 AM) *

I'm not sure what you mean by trying "my own computer/browser" (you mean just loading like the index.html file from my desktop into a browser? ...if so, that works).

No I was just speculating that maybe there was something wrong with only your own computer, but I suspect that EMBED is simply not well supported anymore...

QUOTE
However, the final code you gave me actually works now!!! It works on all three test sites and on all three browsers. You don't know how long I've been working on this. Thank you, thank you, THANK YOU!!! biggrin.gif

You're welcome! smile.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 2 2018, 12:32 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Forgot to say, your original code worked for me in all browsers except K-Meleon (a few versions old gecko engine). FF, Iron (same as Chrome), IE, Edge. I only got controls in one browser though. Think it was Iron.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SWLinPHX
post Jul 2 2018, 02:51 AM
Post #15





Group: Members
Posts: 9
Joined: 5-May 09
Member No.: 8,523



QUOTE(pandy @ Jul 1 2018, 10:32 PM) *

Forgot to say, your original code worked for me in all browsers except K-Meleon (a few versions old gecko engine). FF, Iron (same as Chrome), IE, Edge. I only got controls in one browser though. Think it was Iron.


Interesting Pandy. A couple people I asked said it wasn't working for them either. I know on mobile apps it's really difficult. With the new fix all worked on all test sites, browser and platforms except the newest Google Chrome because of their autoplay rules. I made a separate link to load the embed code page version because that bypasses their rules, or you can simply allow autoplay by going to chrome://flags/#autoplay-policy. And yes, I know autoplay can be annoying, but this is just for about less than 500 people to see and only for two months. They can use MUTE on their computer or hit PAUSE. And on mobile it won't autoplay anyway.

Thanks again both of you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:34 AM