Passing variable from Jquery to HTML attribute

[Deleted member 66701]

Can you help with this problem?

If you navigate to http://beyonce.frontierwebdesign.co.uk/index2.html then media > albums > click the ? image you can see I'm trying to set up a "random song generator. I've included the code below. You can see I'm building a variable string (for the path/url/location of the audio files) that I pass to the <source id="audiourl"> to be used as the src attribute. However, the MP3 is not playing, although when you do an inspect element on the player you can see the src="" attribute is populated correctly (i.e. audio/02/03.mp3). If I hard code the source - i.e. put src="audio/02/03.mp3" then it plays fine.

Am I trying to do something that cannot be done? Do I need to use something like AJAX to force a refresh on the audio player so the src attribute gets picked up?

Spoiler

 <script>
function myFunction() {
    var album = Math.floor((Math.random() * 5) + 1);
var track = Math.floor((Math.random() * 9) + 1);
var url = ("audio/0" + album + "/0" + track + ".mp3");
document.getElementById("demo").innerHTML = ("audio/0" + album + "/0" + track + ".mp3");
$("#audiourl").attr("src", url);
$("#randomplayer").fadeOut(350);
$("#randomplayer").fadeIn(350);
}
</script>
 
    <div id="06musicplayer" class="container 75% gallery">
      <div id="album"><img class="album  shadow" src="images/albums/random.png" width="100" height="100" alt=""/>
      <span class="backtoalbums">Back to Albums</span>
      </div>
<div><p>Page construction in progress!</p>
        <p> Click to play a Beynoce song selected at random.</p>
        <button onclick="myFunction()">Suprise me!</button>
           <p id="demo"></p>
        <div id="randomplayer">
              <audio controls preload="none">
                      <source id="audiourl" type="audio/mpeg">
                    Your browser does not support the audio element. 
             </audio>
        </div>
  </div>
</div>

​Many regards.

 

[touch]

Looks like a 404 error to me?

One of the random files I got trying to load was: audio/04/03.mp3
If i go into album 4 and look at track 3, the url is: audio/04/03. I Miss You.mp3

 

[Deleted member 66701]

Looks like a 404 error to me?

One of the random files I got trying to load was: audio/04/03.mp3
If i go into album 4 and look at track 3, the url is: audio/04/03. I Miss You.mp3

Yeah, sorry - for now I've only renamed audio/01/01.mp3 and audio/01/02.mp3.

If I hardcode the variable to audio/01/01.mp3 and pass that as the src attribute attribute, it still wont play.

EDIT:- Ok - so I've constrined the generator to tracks 1 and 2 on the album.

In Chrome it wont play but in I.E. it does - so that's a good start!

Pressing the generate button again changes the variable but the same song stays loaded into the player - so that's something else that needs looking at.

progress though - at least I know it can be done now!

 

[GravyMonster]

You have a few issues:

- The <source> element was missing its closing tag. Also the controls parameter should have a value set to maintain standards compliance.
- You were using an odd mix of jQuery and native JS. I've converted your code to use jQuery only as it's a better separation of concerns (ie. no ugly 'onclick' attributes stuck in your HTML)
- tidied up the logic of the JS slightly (removed the duplication of the url string by using the variable, removed the brackets around it and put the fadein in the callback of fadeout so the animation is visible)
- and the biggie, once you change the source of an audio element you have to call 'play' on the <audio> element to start it.

Here's the updated code:

<script>
    $(function() {
        $('#randomise').click(function() {
            var album = Math.floor((Math.random() * 5) + 1);
            var track = Math.floor((Math.random() * 9) + 1);
            var url = "audio/0" + album + "/0" + track + ".mp3";

            $("#demo").html(url);
            $("#randomplayer").fadeOut(350, function() {
                $(this).fadeIn(350);    
                var $audio = $("#audiourl").attr("src", url);
                $audio[0].play(); // play it!
            });
        });
    });
</script>
<div id="06musicplayer" class="container 75% gallery">
    <div id="album">
        <img class="album  shadow" src="images/albums/random.png" width="100" height="100" alt="" /> 
        <span class="backtoalbums">Back to Albums</span>
    </div>
    <div>
        <p>Page construction in progress!</p>
        <p>Click to play a Beynoce song selected at random.</p>
        <button id="randomise">Suprise me!</button>
        <p id="demo"></p>
        <div id="randomplayer">
            <audio controls="controls" preload="none">
                <source id="audiourl" type="audio/mpeg"></source>
                Your browser does not support the audio element.
            </audio>
        </div>
    </div>
</div>

 

[Deleted member 66701]

Ah, you see as I posted that I've carried on researching it and I hit upon the load element as a possible solution - you're a star spunkey - thanks for taking the time to explain it - I really do appreciate it!

I've only been leaning jquery for 3 weeks - I'm sure I'll get it eventually

 

[Deleted member 66701]

Ok - used your suggestions (change a little it of the code to show the audio player all the time).

On 1st click, a random file is selected and plays! Yay, success! But only in IE - not playing in Chrome or Firefox

I also need to figuire out a way of reloading the player with a new src when the generate button is clicked again.

Current code:-

Spoiler

<script>
    $(function() {
        $('#randomise').click(function(event) {
			jQuery('audio').each(function(){ this.pause()});
			$("#randomplayer").fadeIn(350);
            var album = Math.floor((Math.random() * 5) + 1);
            var track = Math.floor((Math.random() * 9) + 1);
            var url = "audio/0" + album + "/0" + track + ".mp3";
            $("#demo").html(url);
            var $audio = $("#audiourl").attr("src", url);
            $audio[0].play(); // play it!
        });
    });
</script>
 
    <div id="06musicplayer" class="container 75% gallery">
      <div id="album"><img class="album  shadow" src="images/albums/random.png" width="100" height="100" alt=""/>
      	<span class="backtoalbums">Back to Albums</span>
      </div>
    	<div>
        	<p>Page construction in progress!</p>
        	<p>Click to play a Beynoce song selected at random.</p>
        	<button id="randomise">Suprise me!</button>
        	<p id="demo"></p>
        	<div id="randomplayer">
            	<audio controls autoplay preload="none">
                	<source id="audiourl" type="audio/mpeg"></source>
                	Your browser does not support the audio element.
            	</audio>
        	</div>
    	</div>
	</div>

TBH - this is waaaaaaaaaaaaaaaaaaaaaay advanced for my 4th month at uni and only my second website - but I do like to push myself! The assignment brief only said "create a website with at least 4 jquery functions" - I'm up to about 30!

 

[Deleted member 66701]

Holy mother of god I fixed it! Now working in Chrome, IE and FF! And it changes track when the button is pressed!

 

[Hyburnate]

Nice, should probably give the song names now rather than the path but nice job

 

[Deleted member 66701]

Nice, should probably give the song names now rather than the path but nice job

Steady on

Yeah, I might do that, the display of the path was for my benefit really - and I might change the album pic to the one selected by the rng

Project for tomorrow!

 

[touch]

It wouldnt be difficult to get the track name, might even be easier.
Rather than using a random number to generate a direct URL to an audio file, you could use the random number in a selector to find one of your objects with the audioplayXXXX class.
Then you can get the src attribute from it for your mp3 and the track name from the html attribute of the span with the same class.

 

[Deleted member 66701]

FYI - assignment has been marked - 100% / A+

Overall you have excelled in this assignment and it is clearly evident in the final product, I am very proud of you keep up the good work, an outstanding website.

Thanks for everyones help.