Elements only show before script (correction: ...before audio tag)

StackOverflow https://stackoverflow.com/questions/22753933

  •  24-06-2023
  •  | 
  •  

Question

Edit: This might be a problem with the audio tag in html5. If I put the audio at the top of the page then all other elements are missing. If I put the audio at the bottom then it doesn't matter where the javascript is located.

I am working on a javascript mp3 player. This is my first project utilizing javascript and html5. For now I want a text box where I can paste song titles into and then parse into the player. Right now the songs need to be hardcoded into the page. I also have a few buttons to change the song. This works fine if I put the elements before the script portion. If I try to put the buttons and <textarea> box under the script, it does not show on the page. I was really hoping to wing this because I am the learn as you go type. I'm pretty sure I can work with what I have, but I really want the <textarea> box and corresponding <input> button under my player. I would greatly appreciate any help in sorting out my errors. Here is my code so far.

<html>
<head><title>JS Player</title></head>
<body>
<textarea id="ta"></textarea>
<input type="button" onClick="alert(document.getElementById('ta').value)">
<br><br>
<button onclick="nextsong(2)">Previous song</button>
<button onclick="nextsong(1)">Start over</button>
<button onclick="nextsong(0)">Next song</button>
<div id="titletxt"></div>
<audio controls id="myplayer" src="" type="audio/mpeg"/>

<script>

var base = "http://192.168.0.17:12345/kroq/KROQ_1981/"
var mystringarray = [
"001 Missing Persons - Mental Hopscotch.mp3",
"002 Adam & the Ants - Antmusic.mp3",
"003 Go Go's - We Got The Beat.mp3",
"004 Dave Stewart and Barbara Gaskin - It's My Party.mp3",
"005 Josie Cotton - Johnny, Are You Queer.mp3",
"006 Oingo Boingo - On The Outside.mp3",
"007 Rolling Stones - Start Me Up.mp3",
"008 Romeo Void - Never Say Never.mp3",
"009 Ramones - We Want The Airwaves.mp3",
"010 Penetrators - I'm With The Guys.mp3",
];

var glob = 0;
function nextsong(offset){
    glob = glob - offset
    target = base.concat(escape(mystringarray[glob]));
    document.getElementById("myplayer").src = target;
    document.getElementById("myplayer").load();
    document.getElementById("myplayer").play();
    document.getElementById("titletxt").textContent = unescape(mystringarray[glob]);
    glob = glob + 1;
    document.getElementById("myplayer").onended = function(){nextsong(0);}
}
nextsong(0);
</script>
</body>
</html>
Was it helpful?

Solution 3

Although <audio controls src="" type="audio/mpeg" /> will provide a working player, the syntax is not correct. <audio controls src="" type="audio/mpeg"></audio> allows additional elements to follow the player.

OTHER TIPS

it will only work if the element are before the script becuase javascript needs the DOM to load first before it can manipulate it. you should have your script in a separate file. this makes for neater code.

<html>
 <head>
  <script src="javascript\someFileName.js"></script>
 </head>

Try put js code in to:

$(document).ready(function(){
    // your code here
});

http://learn.jquery.com/using-jquery-core/document-ready/

Sorry, if i misunderstand you

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top