<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* background-color: #4f478b; */
background-image: url(../img/海之蓝.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#pd-box{
position: relative;
left: 50%;
margin-left: -300px;
top: 600px;
width: 600px;
height: 60px;
border-radius: 0px 0px 15px 15px;
overflow: hidden;
background-color: #aaffff;
}
#pd-bg{
display: inline-block;
width: 490px;
height: 20px;
margin: 20px 80px ;
overflow: hidden;
background-color: #d5ead5;
}
#progress-bar{
position: absolute;
width: 10px;
height: 20px;
background-color: #ff5500;
overflow: hidden;
outline: none;
}
#play {
position: absolute;
margin-left: 10px;
margin-top: 30px;
outline: none;
color:white;
background-color: orange;
}
#play:hover{
color:black;
cursor: pointer;
}
#pause {
position: absolute;
margin-left: 10px;
margin-top: 5px;
outline: none;
color:white;
background-color: #ff5500;
}
#pause:hover{
color: black;
cursor: pointer;
}
#carToon{
position: absolute;
left: 50%;
border-radius: 15px;
top: 100px;
margin-left: -300px;
width:600px;
height: 530px;
background-color:#35fff9;
background-color: rgba(53,255,549,0.6);
}
#mv{
position: absolute;
left: 50%;
margin-left: -75px;
top: 200px;
width:150px;
height: 150px;
border-radius: 50%;
background-image: url(../img/小马嚎叫.jpg);
background-size: 150px 150px;
border: 2px solid #ffffff;
animation-timing-function: linear;
animation-name:roll ;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#mv:hover{
box-shadow: #9e9e9e 1px 1px 10px 5px ;
cursor: pointer;
}
@keyframes roll{
10%{
transform: rotateZ(45deg);
}
30%{
transform: rotateZ(135deg);
}
50%{
transform: rotateZ(200deg);
}
80%{
transform: rotateZ(300deg);
}
100%{
transform: rotateZ(360deg);
}
}
div.iconfont{
font-size:50px;
text-align: center;
line-height: 50px;
color: #85ffe5;
}
#iconPlay{
position: absolute;
width: 50px;
height:50px;
top:251px;
left: 277px;
}
#iconPlay:hover{
cursor: pointer;
}
</style>
</head>
<body>
<script type="text/javascript">
const audio = document.getElementById('audio');
const progressBar = document.getElementById('progress-bar');
const pg = document.getElementById('pd-bg');
const play = document.getElementById('play');
const pause = document.getElementById('pause');
var swap = document.getElementById('iconPlay');
//播放按钮监听
play.addEventListener('click',function(){
audio.play();
},false);
//暂停按钮监听
pause.addEventListener('click',function(){
audio.pause();
},false);
//icon切换
swap.addEventListener('click',function(){
if(swap.className == 'iconfont icon-z') {
swap.setAttribute('class','iconfont icon-bofang');
audio.play();
}
else{
swap.setAttribute('class','iconfont icon-z');
audio.pause();
}
},false);
//进度条控制
audio.addEventListener('timeupdate',function(){
var currTime = audio.currentTime;
var duration = audio.duration;
var playPercent = (currTime/duration * 100 ) + '%';
progressBar.style.width = playPercent;
},false);
//跳播功能
pg.addEventListener('click',function(event){
// Specifies the x-coordinate (in pixels) of the mouse relative to the object that is firing the event.
// 获取鼠标点击处，相对于该元素内部左边界的位移量
var currentbar = event.offsetX;
var totalbar = this.offsetWidth;
var jumpPercent = currentbar/totalbar ;
var newTime = jumpPercent * audio.duration;
//修改进度条时间
audio.currentTime = newTime;
},false);
</script>
</html>
オーディオタグの属性：
// 1.controls：コントロールパネルを表示
します
// 2.autoplay：自動再生をオンにします// 3.muted：ミュート再生
// 4. loop：ループ再生
//関連イベント
// 1.canplay： 4
/ / *トリガーのタイミング：ビデオが読み込まれます（ページが開かれると1回実行され、ページが繰り返し更新されると実行されません）
// *アプリケーションシナリオ：ビデオの長さを取得し
ます// *トリガーの数：1回トリガーします
// 2.timeupdate
// *トリガータイミング：オーディオ再生
// *トリガー時間：複数回
// *アプリケーションシナリオ：プログレスバーの更新
// 3.ended：
// *トリガータイミング：オーディオ再生終了
// *トリガー時間：1回
// *アプリケーションシナリオ：次のオーディオを自動的に再生する
// 4.volumechange：
// *トリガーのタイミング：音量を変更する
// *トリガーの回数：数回
//関連するメソッド：
// * pause（）：再生を一時停止する* play（）：再生を開始します
//関連する属性：
// 1.currentTime：現在の再生の継続時間を取得
します
// 2.duration：オーディオの合計継続時間// 3.volumn：音量（最大値は1です）
効果は図のようになります。
