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

admin管理员组
文章数量:1026989

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>

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.

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>

本文标签： javascriptHTML5 audio player Cannot read property 39paused39 of nullStack Overflow

版权声明：本文标题：javascript - HTML5 audio player, Cannot read property 'paused' of null - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745652019a2161375.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

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

2 Answers 2

2 Answers 2

更多相关文章