<!DOCTYPE html>
<html>
<head>
<title>Audio playbackRate Example</title>
</head>
<body>
<div>
<audio style="width:25%" controls>Canvas not supported</audio>
</div>
<div>
<input type="text" value="audio.mp3" size="60" />
</div>
<button οnclick="togglePlay();">Play</button>
<button οnclick="increaseSpeed();">Increase speed</button>
<button οnclick="decreaseSpeed();">Decrease speed</button><br />
<div ></div>
<script type="text/javascript">
// Create a couple of global variables to use.
var audioElm = ("audio1"); // Audio element
var ratedisplay = ("rate"); // Rate display area
// Hook the ratechange event and display the current playbackRate after each change
("ratechange", function () {
= "Rate: " + ;
}, false);
// Alternates between play and pause based on the value of the paused property
function togglePlay() {
if (("audio1")) {
if ( == true) {
playAudio(audioElm); // if player is paused, then play the file
} else {
pauseAudio(audioElm); // if player is playing, then pause
}
}
}
function playAudio(audioElm) {
("playbutton").innerHTML = "Pause"; // Set button text == Pause
// Get file from text box and assign it to the source of the audio element
= ('audioFile').value;
();
}
function pauseAudio(audioElm) {
("playbutton").innerHTML = "play"; // Set button text == Play
();
}
// Increment playbackRate by 1
function increaseSpeed() {
+= 1;
}
// Cut playback rate in half
function decreaseSpeed() {
if ( <= 1) {
var temp = ;
= (temp / 2);
} else {
-= 1;
}
}
</script>
</body>
</html>
/zh-CN/docs/Using_HTML5_audio_and_video
