十二、音频 用js控制播放

方法：

play: 播放
pause:暂停

属性：

volume:音量 0~1
muted:值是布尔类型  是否静音
duration:总播放时长
currentTime:当前的播放时间

12.1 dom结构

<audio src="audio/冯小威 - 郑州.mp3" controls id="audio"></audio>
<div id="btn">
    <button id="play">播放</button>
    <button id="pause">暂停</button>
    <button id="up">音量+</button>
    <button id="down">音量-</button>
    <button id="shutup">静音</button>
</div>
<div id="process">
    <div id="bar">
        <div id="block"></div>
        <div id="content"></div>
    </div>
</div>

12.2 CSS样式

* {
    padding: 0;
    margin: 0;
}
#btn {
    margin: 10px;
}
#process {
    width: 420px;
    height: 50px;
    background-color: red;
    overflow: hidden;
}
#process #bar {
    position: relative;
    width: 400px;
    height: 5px;
    background-color: blue;
    margin: 25px auto;
}
#block {
    position: absolute;
    width: 5px;
    height: 20px;
    background-color: orange;
    top: 50%;
    margin-top: -10px;
}
#content {
    width: 0;
    height: 100%;
    background-color: orange;
}

12.3 js

// 获取元素
var audio = document.getElementById("audio");
var play = document.getElementById("play");
var pause = document.getElementById("pause");
var bar = document.getElementById("bar");
var block = document.getElementById("block");
var content = document.getElementById("content");
var up = document.getElementById("up");
var down = document.getElementById("down");
var shutup = document.getElementById("shutup");

// 添加点击事件
play.onclick = function(){
    audio.play();
}

pause.onclick = function(){
    audio.pause();
}

up.onclick = function(){
    if ( audio.volume === 1){
        return;
    }
    var volume = audio.volume * 10;
    volume ++;
    audio.volume = volume / 10;
    // console.log(audio.volume);
}

down.onclick = function(){
    if ( audio.volume === 0){
        return;
    }
    var volume = audio.volume * 10;
    volume --;
    audio.volume = volume / 10;
    // console.log(audio.volume);
}

shutup.onclick = function(){
    if(audio.muted){
        shutup.innerHTML = "静音";
    } else {
        shutup.innerHTML = "恢复";
    }
    // audio.muted = true;
    audio.muted = !audio.muted;
}

// 添加 onmousedown事件
block.onmousedown = function(e){
    // 获取鼠标的位置
    var x = e.clientX;
    // 获取block的定位值
    var left = this.offsetLeft;
    // 添加 mousemove事件
    document.onmousemove = function(e){
        // 获取鼠标移动后的位置
        var m_x = e.clientX;
        var result = m_x + left;
        // 边界判定
        if (result < 0){
            result = 0;
        } else if (result > bar.clientWidth - block.clientWidth){
            result = bar.clientWidth - block.clientWidth;
        }
        // 获取进度比例
        var r = result / (bar.clientWidth - block.clientWidth);
        // console.log(r);
        audio.currentTime = r * audio.duration;
        // 赋值 block 的定位值
        block.style.left = result + "px";
        // 改变 content 的宽度
        content.style.width = result + "px";
    }
}

// 取消mousemove事件
document.onmouseup = function(){
    document.onmousemove = null;
}