Question

编辑：这可能是html5中audio标记的问题。如果我将audio放在页面顶部，那么所有其他元素都会丢失。如果我将audio放在底部，那么javascript所在的位置并不重要。

我正在开发一个javascript mp3播放器。这是我的第一个使用javascript和html5的项目。现在我想要一个文本框，我可以在其中粘贴歌曲标题，然后解析到播放器。现在，歌曲需要硬编码到页面中。我也有几个按钮来改变这首歌。如果我将元素放在脚本部分之前，这可以正常工作。如果我尝试将按钮和<textarea>框放在脚本下，它就不会显示在页面上。我真的希望能够实现这一目标，因为我是你学习的类型。我非常确定我可以使用我所拥有的功能，但我真的希望我的播放器下方有<textarea>框和相应的<input>按钮。我非常感谢帮助整理我的错误。到目前为止，这是我的代码。

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

Answer 1

只有元素在脚本之前才会起作用，因为javascript需要先加载DOM才能操作它。你应该把你的脚本放在一个单独的文件中。这使得整洁的代码。

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

Answer 2

尝试将js代码放入：

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

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

对不起，如果我误解了你

Answer 3

虽然<audio controls src="" type="audio/mpeg" />将提供有效的播放器，但语法不正确。 <audio controls src="" type="audio/mpeg"></audio>允许其他元素跟随播放器。

元素仅在脚本之前显示（更正：...在音频标记之前）

3 个答案: