思路都在注释里了，想法跟着注释走！

HTML部分：

<div class="main">
    <!--创建audio对象-->
    <audio id="my_music" src="http://www.xuxiangbo.com/music/song.mp3"></audio>
    </div>
    <div class="ctrl">
        <!--音乐时长 数字方式显示-->
        <div class="song_info"><span id="ed_time">00:00</span> / <span id="full_time"></span></div>
        <!--进度条-->
        <div class="time_line"><!--外层div代表音乐总时长-->
            <div class="time_line_ed"><!--加ED的代表已经播放的-->
                <div class="time_line_ed_tit"></div><!--进度条最右侧的小圆点-->
            </div>
        </div>
        <!--控制器 没什么说的-->
        <div class="ctrl_btn">
            <button class="ctrl_button" title="上一曲">上一曲</button>
            <button class="ctrl_button" title="播放" style="font-weight:bolder;font-size:30px">播放/暂停</button>
            <button class="ctrl_button" title="下一曲">下一曲</button>
            <span class="ctrl_vol"><a class="vol_off">音量</a></span>
        </div>
    </div>
</div>

CSS部分没什么难度，主要就是进度条的两个DIV嵌套，代码：

#my_music{
    display: none;
}
.ctrl{
    position: absolute;
    bottom: 100px;
    left: 50%;
    margin-left: -500px;
    width: 1000px;
    height: 100px;
    overflow: hidden;
}
.time_line{
    width: 1000px; /*1000px方便计算进度百分比，数学好的可以随便搞*/
    height: 5px;
    background: #fff;
    border-radius: 20px;
    position: relative;/*父级 .ctrl 用了绝对定位，这边可以用相对定位*/
    top: 10px;
    cursor: pointer;
}
.time_line_ed{
    position: absolute;/*这个定位...为什么是absolute，忘记了，好尴尬....*/
    left: -985px;
    width: 1000px;
    height: 5px;
    border-radius: 20px;
    background: #007979;
    cursor: pointer;
}
.time_line_ed_tit{
    width: 5px;
    height: 5px;
    background: #fff;
    border: 5px solid #007979;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: 0;
}

.ctrl_btn{
    position: absolute;
    top: 60px;
}
.ctrl_btn button{
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 10px;
}
.ctrl_btn button:hover{
    color: #007979;
}
.ctrl_btn button:focus{
    outline: none;
}
.ctrl_vol a{
    font-size: 22px;
    color: #007979;
    margin-left: 20px;
    cursor: pointer;
}
.ctrl_vol span{
    display: inline-block;
    width: 10px;
    height: 8px;
    background: #fff;
    cursor: pointer;
    position: relative;
    bottom: 3px;
}

JS部分：
window.onload = function (){
    //获取音乐对象
    var my_music = document.getElementById('my_music');

    //获取音乐时间，要给一个canplay事件，否则会网络不好的时候会返回NAN
    my_music.addEventListener("canplay",function(){
        //设置初始音量
        my_music.volume = 0.5;

        //格式化音乐时长 duration
        var time_min = parseInt(my_music.duration/60);
        if (time_min<10) {
            time_min = "0" + time_min; //小于十的数字前面加0
        };
        var time_sen = parseInt(my_music.duration%60);
        if (time_sen<10) {
            time_sen = "0" + time_sen;
        };
        var time = time_min + ":" + time_sen;
        document.getElementById('full_time').innerHTML = time;//输出音乐时间

    }) 
    //已播放时长
    function show_timed(){
        //格式化已播放的时间  currentTime
        var timed_min = parseInt(my_music.currentTime/60);
        if (timed_min<10) {
            timed_min = "0" + timed_min;
        }; 
        var timed_sen = parseInt(my_music.currentTime%60);
        if (timed_sen<10) {
            timed_sen = "0" + timed_sen;
        };
        var timed = timed_min + ":" + timed_sen;
        document.getElementById('ed_time').innerHTML = timed;//输出已播放的时间
    }
    setInterval(show_timed,100);

    //进度条
    var time_line_ed = document.getElementsByClassName('time_line_ed')[0];
    function move(){
        //计算已播放的百分比 乘1000（CSS里面设置的time_line的宽度，减去小圆点的15，所以是985）
        var jindu = my_music.currentTime/my_music.duration*985 - 985;
        time_line_ed.style.left = jindu + "px";//请忽略这个高端大气上档次的变量名...
    }
    setInterval(move,100);//让进度条动起来

    //进度条点击事件
    var time_line = document.getElementsByClassName('time_line')[0];
    time_line.addEventListener("click",function(){
        var e = event || window.event;
        var pos = time_line.getBoundingClientRect();
        var dutime = e.clientX - pos.left;//获取点击位置
        var ddd = dutime/985*my_music.duration;
        my_music.currentTime = ddd;//根据百分比让 进度条 和 已播放时间 同步
    })

    //控制器 播放/暂停
    var crtl_button = document.getElementsByClassName('ctrl_button');
    crtl_button[1].addEventListener("click",function(){
        //判断当前状态，paused 执行函数 播放（play()） or 暂停（pause()） ，
        if (my_music.paused){
            my_music.play();
            this.style.color = "#007979";
            this.setAttribute('title','暂停');
        }else{
            my_music.pause();
            this.style.color = "#ffffff";
            this.setAttribute('title','播放');
        }
    })

    //当前播放完毕事件 暂停、恢复按钮状态
    my_music.addEventListener("ended",function(){
        my_music.pause(); 
        crtl_button[1].style.color = "#ffffff";
        crtl_button[1].setAttribute('title','播放');
    })

    //音量控制
    var vol_num = 0;
    var vol = document.getElementsByClassName('ctrl_vol')[0];
    for (var i = 0; i < 10; i++) { //输出音量色块 每一个色块代表 10%的音量
        var append_span = document.createElement("span");
        vol.appendChild(append_span);
    }
    var vol_btn = vol.getElementsByTagName("span");
    for (var i = 0; i < vol_btn.length; i++) {
        if (i < 5) {
            vol_btn[i].style.background = "#007979"; //默认50%音量，所以输出5个带颜色的
        }
    }
    for (var i = 0; i < vol_btn.length; i++) {
        vol_btn[i].index = i + 1;
        vol_btn[i].addEventListener("click",function(){//判断点击色块的 索引
            my_music.volume = this.index/10;
            for (var x = 0; x < vol_btn.length; x++) {
                if (x < this.index) {
                    vol_btn[x].style.background = "#007979";
                }else{
                    vol_btn[x].style.background = "#fff";
                }
            }
            vol_num = this.index;
        })
    };
    var vol_off = document.getElementsByClassName('vol_off')[0];
    vol_off.addEventListener("click",function(){
        if (my_music.volume) {
            my_music.volume = 0;
            this.innerHTML = "静音";
            for (var i = 0; i < vol_btn.length; i++) {
                vol_btn[i].style.background = "#fff";
            }
        }else{
            if (vol_num) {
                my_music.volume = vol_num/10;
                this.innerHTML = "音量";
                for (var i = 0; i < vol_num; i++) {
                        vol_btn[i].style.background = "#007979";
                }
            }else{
                my_music.volume = "0.5";
                this.innerHTML = "";
                for (var i = 0; i < 5; i++) {
                        vol_btn[i].style.background = "#007979";
                }
            }
        }
    })
}

	原生js撸的不多，工作一直都用jq来着，最近打算把扔掉的原生重新捡起来，所以代码写的比较懒散，大牛们有兴趣给优化一下的，欢迎联系我。代码仅供参考，请勿直接复制使用，以免出现不必要的意外。