Question

我正试图从这个网站学习HTML音频播放器：http://www.alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

有他的代码：http://codepen.io/katzkode/pen/Kfgix

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"; 
         }
}

我只是想让播放器播放音乐，它在codepen中播放但不在我的浏览器中播放，是否有人知道问题出在哪里？我的调试器说

未捕获的TypeError：无法读取属性'暂停'为空

每次我点击播放/暂停按钮。

正如你在codepen中看到的那样，播放和暂停按钮在第二次点击而不是第一次点击后开始改变，任何建议都是为什么？

感谢您的帮助。

Answer 1

您是否在一个HTML文件中执行所有这些操作？你的代码通过将javascript移出标题并在上面来为我工作。

<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>

Answer 2

确定。这是同一个前提。

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

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

HTML5音频播放器，无法读取属性＆＃39;暂停＆＃39;为null

2 个答案: