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

Im trying to learn HTML audio player from this website: /

There is his code:

heres my code:

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.

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.

Share Improve this question edited Feb 1, 2015 at 17:07 Kevin Brown-Silva 41.7k42 gold badges206 silver badges243 bronze badges asked Aug 14, 2014 at 15:34 user3786923 612 gold badges3 silver badges8 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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>

Ok. It's the same premise.

<head>
    <link rel="stylesheet" type="text/css" href="myCSS.css">
</head> 
<body>

your HTML
    <script type="text/javascript" src="myJS.js"></script>
</body>
</html>

Programmer puzzle solving

javascript - HTML5 audio player, Cannot read property 'paused' of null - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)