<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls>
<source
src="https://ln-sycdn.kuwo.cn/473c9b06584e5f634f8d3fceff593a9f/639ecbcf/resource/n1/15/98/3949516821.mp3"
type="audio/mp3" />
</audio>
<button class="startBtn" onclick="start()">开始播放</button>
<button onclick="pause()">暂停播放</button>
<button onclick="restart()">重新播放</button>
<button onclick="xunhuan()">循环播放</button>
<button onclick="san()">三倍速播放</button>
<script>
let aut = document.querySelector("audio")
function start() {
aut.play();
}
function pause() {
aut.pause();
}
function restart() {
aut.currentTime = 0;
aut.play()
}
function xunhuan() {
aut.setAttribute("loop", "");
}
aut.addEventListener("timeupdate", function (e) {
})
function san() {
console.log(1);
aut.PlaybackRate = 3;
console.log(aut.PlaybackRate);
aut.play();
}
</script>
</body>
</html>
下面这个是带进度条的音视频(本人仅是为了参考进度条制作,怕以后忘了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.css">
<script>
window.onload = function () {
var video = document.getElementsByTagName("video")[0];
var progressTimer = document.querySelector('.progress_timer');
var durationTimer = document.querySelector('.duration_timer');
var progress = document.querySelector('.progress');
let { totalT, presentT } = { totalT: 0, presentT: 0 }
video.addEventListener('canplay', function () {
totalT = this.duration;
var videoDuration = formatTime(totalT);
durationTimer.innerHTML = videoDuration;
})
audio.addEventListener('timeupdate', function () {
presentT = this.currentTime;
var videoCurrent = formatTime(presentT);
progressTimer.innerHTML = videoCurrent;
var percent = presentT / totalT * 100;
progress.style.width = percent + '%';
})
function formatTime(t) {
var h = parseInt(t / 3600);
h = h < 10 ? '0' + h : h;
var m = parseInt(t % 3600 / 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(t % 60);
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
function makeDurationToSeconds(time){
var str = time;
var arr = str.split(':');
var hs = parseInt(arr[0]*3600);
var ms = parseInt(arr[1]*60);
var ss = parseInt(arr[2]);
var seconds = hs + ms + ss;
return seconds;
}
document.getElementById("one").onclick = function () {
video.play();
}
document.getElementById("two").onclick = function () {
video.pause();
}
document.getElementById("three").onclick = function () {
video.currentTime += 1 / 25;
console.log(video.currentTime);
}
document.getElementById("four").onclick = function () {
video.currentTime -= 1 / 25;
}
var audio = document.getElementsByTagName("audio")[0];
console.log(audio);
document.getElementById("five").onclick = function () {
audio.play();
}
document.getElementById("six").onclick = function () {
audio.pause();
}
document.getElementById("seven").onclick = function () {
audio.currentTime += 5;
}
document.getElementById("eight").onclick = function () {
audio.currentTime -= 5;
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="content">
<div class="player">
<video src="./mv/1.mp4"></video>
<div class="control">
<div>
<span class="progress"></span>
</div>
<div class="timer">
<span class="progress_timer">00:00:00</span>/
<span class="duration_timer">00:00:00</span>
</div>
</div>
</div>
</div>
<button id="one">播放</button>
<button id="two">暂停</button>
<button id="three">快进</button>
<button id="four">后退</button>
</div>
<audio controls>
<source
src="https://ln-sycdn.kuwo.cn/473c9b06584e5f634f8d3fceff593a9f/639ecbcf/resource/n1/15/98/3949516821.mp3"
type="audio/mp3" />
</audio>
<br>
<button id="five">播放</button>
<button id="six">暂停</button>
<button id="seven">快进</button>
<button id="eight">后退</button>
</body>
</html>