Help with a javascript problem that I'm stuck with...

by 6 replies
7
I've been trying to get this to run for nearly a week, but the slow progress I've been making doesn't seem to get me that much closer to what I wanted in the first place.

The idea is, when you press the button you will see in the text box the current time of the song (that has to be playing in the background).

But, I'm getting 'TypeError: 'null' is not an object (evaluating 'music.currentTime = att_hash['a']')' when I click on the 'Click Me!' button.

Help!

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as an audio player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a"
});
},
swfPath: "js",
supplied: "m4a, oga",
wmode: "window"
});
});
//]]>
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>A Song</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
<br><br>
<button id="gettime">Click Me!</button>
<input type="text" id="showtime">
<script language="javascript">                    
var music = document.getElementById('music') // Your <audio> object
var gettime = document.getElementById('gettime') // A 'get time' button
var showtime = document.getElementById('showtime') // An input text object for displaying the URL
gettime.addEventListener("click", function(){
showtime.value = window.location.protocol+'//'+window.location.host+window.location.pathname+'?a='+music.currentTime;
}, true);
window.addEventListener('load', function(){
var att_hash = get_url_variables()
if (att_hash) {
music.currentTime = att_hash['a']
}
}, true);
function get_url_variables() {
var att_hash = []
var var_array = window.location.search.split(/[\?&]/)
for (i=0; i<var_array.length; i++) {
if (var_array[i] != "") {
var att_var = var_array[i].split("=",2)
att_hash[att_var[0]]=att_var[1]
}
}
return att_hash;
}
</script>
</body>
</html>
#programming #javascript #problem #stuck
  • you do not have a music element for this line:
    var music = document.getElementById('music')
  • Thanks for the reply. I'm a PHP guy usually and am trying to learn javascript this year.

    I was posted this solution on another site based on building upon the jplayer (jPlayer : HTML5 Audio & Video for jQuery) base , however after a number of days I couldn't get it to work.

    Any clues for how to fix the line up:
    var music = document.getElementById('music')

    To get this to work?
  • I know they way you are going at it will not work, but Im not having any luck getting it.
    I can use

    $("#jquery_jplayer_1").jPlayer("play");

    that will play it.

    You will have to access everything with something like:
    $("#jquery_jplayer_1").jPlayer("play");
    or
    $.jPlayer.convertTime(0)

    I have been looking through there docs and not finding much.
    What are you actually trying to do.
    I had stop, pause, play ect working very quickly.
  • Thanks for the reply - really hitting my head against the wall on this!

    The idea is you press the 'Click Me!' button (id="gettime") and the current time gets put into the textbox to the right of it (id="showtime").
  • was wondering why?

    Sorry I don't have a quick solution. I spent more time then I wanted to reading there docs.
    • [1] reply
Join the discussion

Next Topics on Trending Feed

  • 7

    Help with a javascript problem that I'm stuck with...

    I've been trying to get this to run for nearly a week, but the slow progress I've been making doesn't seem to get me that much closer to what I wanted in the first place. The idea is, when you press the button you will see in the text box the current time of the song (that has to be playing in the background).