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.

 

[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!

 

[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!

 

[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!

 

[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.