HTML5 / тег <audio>
Доброго времени суток. Помогите пожалйуста разобраться с создание аудиоплеера. При тестировании нижеприведенного кода возникают проблемы, а именно не срабатывают кнопки. Помогите разобраться с проблемой.
листинг:
<html>
<head>
<title>mp3</title>
<script type="text/javascript" src="js/jquery.js">
function plaay();
{
document.getElementById("player").play();
document.getElementById("pausebutton").style.display= "";
document.getElementById("playbutton").style.display= "none";
}
function paause();
{
document.getElementById("player").pause();
document.getElementById("playbutton").style.display= "";
document.getElementById("pausebutton").style.display= "none";
}
function stop();
{
document.getElementById("player").currentTime= 0;
}
</script>
</head>
<body>
<audio id="player" >
<source= "sound.ogg" type="audio/ogg"> </source>
<source= "sound.mp3" type="audio/mpeg"> </source>
</audio>
<img src="2.JPG" onclick="plaay()" id="playbutton"/>
<img src="1.JPG" onclick="paause()" id="pausebutton" style="display: none"/>
<img src="3.JPG" onclick="stop()"/>
</body>
</html>
листинг:
<html>
<head>
<title>mp3</title>
<script type="text/javascript" src="js/jquery.js">
function plaay();
{
document.getElementById("player").play();
document.getElementById("pausebutton").style.display= "";
document.getElementById("playbutton").style.display= "none";
}
function paause();
{
document.getElementById("player").pause();
document.getElementById("playbutton").style.display= "";
document.getElementById("pausebutton").style.display= "none";
}
function stop();
{
document.getElementById("player").currentTime= 0;
}
</script>
</head>
<body>
<audio id="player" >
<source= "sound.ogg" type="audio/ogg"> </source>
<source= "sound.mp3" type="audio/mpeg"> </source>
</audio>
<img src="2.JPG" onclick="plaay()" id="playbutton"/>
<img src="1.JPG" onclick="paause()" id="pausebutton" style="display: none"/>
<img src="3.JPG" onclick="stop()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
function play() {
console.log("Run");
document.getElementById("player").play();
document.getElementById("pausebutton").style.display="inline";
document.getElementById("playbutton").style.display="none";
}
function pause() {
console.log("Pause");
document.getElementById("player").pause();
document.getElementById("playbutton").style.display="inline";
document.getElementById("pausebutton").style.display="none";
}
function stop() {
console.log("Stop");
document.getElementById("playbutton").style.display="inline";
document.getElementById("pausebutton").style.display="inline";
document.getElementById("player").pause();
document.getElementById("player").currentTime = 0;
}
</script>
</head>
<body>
<audio id="player">
<source src="sound.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="sound.mp3" type="audio/mpeg" />
</audio>
<div onclick="pause()" id="pausebutton" style="display: inline; border: 1px solid black;">
<img src="1.jpg" alt="Pause" title="Pause"/>
</div>
<div onclick="play()" id="playbutton" style="display: inline; border: 1px solid black;">
<img src="2.jpg" alt="Play" title="Play"/>
</div>
<div onclick="stop()" id="stopbutton" style="display: inline; border: 1px solid black;">
<img src="3.jpg" alt="Stop" title="Stop"/>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
function play() {
console.log("Run");
document.getElementById("player").play();
document.getElementById("pausebutton").style.display="inline";
document.getElementById("playbutton").style.display="none";
}
function pause() {
console.log("Pause");
document.getElementById("player").pause();
document.getElementById("playbutton").style.display="inline";
document.getElementById("pausebutton").style.display="none";
}
function stop() {
console.log("Stop");
document.getElementById("playbutton").style.display="inline";
document.getElementById("pausebutton").style.display="inline";
document.getElementById("player").pause();
document.getElementById("player").currentTime = 0;
}
</script>
</head>
<body>
<audio id="player">
<source src="sound.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="sound.mp3" type="audio/mpeg" />
</audio>
<div onclick="pause()" id="pausebutton" style="display: inline; border: 1px solid black;">
<img src="1.jpg" alt="Pause" title="Pause"/>
</div>
<div onclick="play()" id="playbutton" style="display: inline; border: 1px solid black;">
<img src="2.jpg" alt="Play" title="Play"/>
</div>
<div onclick="stop()" id="stopbutton" style="display: inline; border: 1px solid black;">
<img src="3.jpg" alt="Stop" title="Stop"/>
</div>
</body>
</html>