0

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>
1
  • As it is the code is a little buggy. Usually the songs buffer slowly but if I click the input button and then close the alert box (used for debug purposes) the song will finish downloading immediately, sometimes crashing the player.
    – Octipi
    Mar 31, 2014 at 5:57

3 Answers 3

1

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>
2
  • I am still having the problem of not seeing the <textarea> box and <input> button if placed below the player in my source. I think my next approach will be to try invisible frames to contain the elements.
    – Octipi
    Mar 31, 2014 at 5:40
  • I better undstand your point after adding code to adjust the volume of the player. I noticed that when I had the script first the volume wouldn't change.
    – Octipi
    Apr 2, 2014 at 3:49
0

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

1
  • I tried wrapping this around my javascript portion but it didn't work. I think I need to learn about DOM to understand my problem. If I am missing something with this method, hopefully someone can elaborate on how to best prepare the page for javascript.
    – Octipi
    Mar 31, 2014 at 5:27
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.