預(yù)覽圖
music.jpg
注意使用其他類型文件需要更改粗體部分
<audio controls name="audio" width="500px" id="jojo" style="display: none;">
<source src="mp3文件" type="audio/mpeg">
</audio>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="sytle.css">
<title>musicplayer</title>
</head>
<body>
<audio controls name="audio" width="500px" id="jojo" style="display: none;">
<source src="mp3文件" type="audio/mpeg">
</audio>
<br>
<center>
<button onclick="playVid()" class="butn">播放音樂</button>
<button onclick="pauseVid()" class="butn">暫停音樂</button>
<br>
<span>進度條:</span>
<input type="range" min="0" value="0" max="0" id="pro" onchange="timec()" class="pro" />
<span>音量:</span>
<input type="range" min="0" value="10" max="100" id="range" onchange="volume()" class="pro" />
</center>
<script>
var audio = document.getElementById('jojo');
var ran = document.getElementById("range");
var pro = document.getElementById("pro");
//暫停
function pauseVid(){
audio.pause();
}
//開始
function playVid(){
audio.play();
setInterval(pro1,1000);
}
//初始化音量
audio.volume = ran.value / 100;
//拖動進度條
function timec(){
audio.currentTime = pro.value;
}
//同步進度條
function pro1(){
pro.max = audio.duration;
pro.value = audio.currentTime;
}
//控制音量
function volume(){
audio.volume = ran.value / 100;
}
</script>
</body>
</html>
style.css
body{
background-color: rgb(209, 214, 166);
}
.pro {
-webkit-appearance: none;
max-width: 350px;
width: 100%;
height: 10px;
border-radius: 5px;
background: #1B2B33;
outline: none;
margin-top: 50px;
margin-bottom: 30px
}
.pro::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.5);
border:1px solid #eee;
cursor: pointer;
}
.pro::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
cursor: pointer;
}
.butn:active {
background-color: #fff;
box-shadow: 0px 3px #666;
transform: translateY(-7px);
}
.butn{
width: 6.25rem;
height: 1.5625rem;
transform: translateY(-10px);
border-radius: 8px;
background-color: #FFF;
border: none;
transition: .25s;
outline: none;
cursor: pointer;
box-shadow: 0px 5px #000;
}
.butn:hover{
background-color: #EEE;
}
