-1

i have this code:

<b>Title</b>: <span id='songTitle'></span><br>
<b>Album</b>: <span id='songAlbum'></span><br>

<script>
var songs =
[
    { filename: "title1.mp3", title: "title1", album: "Album1" },
    { filename: "title2.mp3", title: "title2", album: "Album2" },
    // add more songs here...
];

var randomIndex = Math.floor(Math.random() * songs.length);
var song = songs[randomIndex];
document.querySelector("source").src = song.filename;
document.getElementById("songTitle").textContent = song.title;
document.getElementById("songAlbum").textContent = song.album;
</script>

<audio class="audio-element" controls="true" preload="none">

<!-- Adding audio sources -->

            <source src="mp3file.mp3" type="audio/mpeg" />
<br>
<b>Your outdated browser does not support HTML5. <br>
Get Mozilla Firefox <a href="https://www.mozilla.org/pl/firefox/new/"> >HERE< </a></b>

</audio>

I want it to show Title and Album text randomly generated from the list, but it doesn't work :( There are just blank spaces, nothing written after the ":" mark, there should be "title1" and "Album1" for example.

Could anyone tell me what's wrong?

Teemu
  • 22,918
  • 7
  • 53
  • 106
Ainei
  • 50
  • 7
  • There are no elements with the id values "songTitle" or "songAlbum". Oh wait I see them, sorry. Well what exactly doesn't work? Are there errors in the console? – Pointy Feb 14 '15 at 14:47
  • There are just blank spaces, nothing written after the ":" mark, there should be "title1" and "Album1" for example – Ainei Feb 14 '15 at 14:51
  • `document.querySelector("source")` is `null`, so attempting to access its `src` property throws. – Oriol Feb 14 '15 at 15:00
  • first make your javascript and html section clear.See demo here http://jsfiddle.net/60sw3s3y/ – A l w a y s S u n n y Feb 14 '15 at 15:06

1 Answers1

0

You should move your javascript down, after the audio tag, otherwise it gets fired before the markup is rendered in the browser. Ideally you'd place it just before the close of the body tag 

<body>
<!-- Markup -->
    <script ...>...</script>
</body>
Bharat
  • 152
  • 1
  • 9