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 user3786923user3786923 612 gold badges3 silver badges8 bronze badges2 Answers
Reset to default 2Are 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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745652020a4638321.html
评论列表（0条）