HTML5 audio player, Cannot read property 'paused' of null

Question

Im trying to learn HTML audio player from this website: http://www.alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

There is his code: http://codepen.io/katzkode/pen/Kfgix

heres my code: http://codepen.io/anon/pen/mjxFu

HTML:

<div id="audioPlayer">
    <button id="pButton" class="play" onclick="play()"></button>
    <div id="timeline">
        <div id=playHead></div>
    </div>
</div>

CSS:

#audioPlayer {
    width:600px;
    height:100px;
    border:2px solid black;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:300px;    
}

#pButton {
    position:absolute;
    left:30px;
    width:50px;
    height:50px;
    border:none;
    top:25px;
    }


.play {background:url('play.png')no-repeat;}
.pause{background:url('pause.png') no-repeat;}

JavaScript:

var music = document.getElementById('music');

var pButton = document.getElementById('pButton');    


function play(){
    if(music.paused){
        music.play();
        pButton.className = "";
        pButton.className = "play";
    }else{
        music.pause();
        pButton.className = "";
        pButton.className = "pause"; 
         }
}

I am just trying to make the player play the music, it plays it in the codepen but not in my browser, does anybody knows where could be the problem? My debugger says

Uncaught TypeError: Cannot read property 'paused' of null

every time I click on the play/pause button.

And as you can see in codepen, the play and pause buttons start to change after the second click not the first one,any suggestions whys that?

Thank you for your help.

user3795442 user3795442 · Accepted Answer · 2014-08-14T16:30:43

Are you doing all of this in one HTML file? Your code worked for me by moving the javascript out of the header and just above .

<html>
<head>
<style>
#audioPlayer {
  width:600px;
  height:100px;
  border:2px solid black;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  top:10px;    
}
#pButton {
  position:absolute;
  left:30px;
  width:50px;
  height:50px;
  border:none;
  top:25px;
  background-repeat:none;
  background-size:100% 100%;
}
.play {background:url('http://www.alexkatz.me/codepen/images/play.png')}
.pause{background:url('http://www.alexkatz.me/codepen/images/pause.png')}
#timeline {
  position:absolute;
  left:100px;
  width:450px;
  height:30px;
  border:none;
  background-color:grey;
  top:35px;
  border-radius:18px;
}    
#playHead {   
  width:30px;
  height: 30px;
  border-radius:50%;
  background-color:black;
}        
</style>
</head>
<body>
<audio id="music" preload="true">
  <source src="http://www.alexkatz.me/codepen/music/interlude.mp3" type="audio/mpeg">
</audio>
<div id="audioPlayer">
  <button id="pButton" class="play" onclick="play()"></button>
<div id="timeline">
  <div id="playHead"></div>
</div>
</div>  
<script type="text/javascript">
  var music = document.getElementById('music');
  var pButton = document.getElementById('pButton');    
  function play() {
    if (music.paused) {
    music.play();
    pButton.className = "";
    pButton.className = "pause";
  } else {
    music.pause();
    pButton.className = "";
    pButton.className = "play";
}
}
</body>
</script>
</html>

HTML5 audio player, Cannot read property 'paused' of null

2 Answers