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

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

  •  24-06-2023
  •  | 
  •  

문제

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>
도움이 되었습니까?

해결책 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.

다른 팁

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top