<audio id="myAudio"></audio>

    <script>

        var myAudio = document.getElementById('myAudio');

        myAudio.src = '../content/audio/海阔天空.mp3';

        myAudio.play();

        myAudio.loop = true;

        myAudio.preload = true;

        myAudio.currentTime

    </script>

只读属性

duration ---获取媒体文件的播放时长，以s为单位，如果无法获取则为NaN，当触发canplay事件后就可以获取当前总长度

startTime---返回起始播放时间，一般是0.0,除非是缓冲过的媒体文件，并一部分内容已经不再缓冲区(此属性好像已经不可用)

paused-----判断是否已经暂停，返回true/false

ended-----判断是否已经播放完毕，返回true/false

error----在发生了错误后，返回错误代码

currentSrc --以字符串的形式发挥正在播放或已经加载的文件，对应浏览器在source元素中选择的文件
buffered---获取当前缓冲区大小，返回TimeRanges对象，点击更多参考

可控制属性

src----指定音频的文件位置

autoplay---是否自动播放

preload----是否预加载

loop------是否循环播放

controls----显示或隐藏用户控制界面

autobuffer---媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性(此属性好像已经不可用)

muted------设置是否静音

volume ----在0.0到1.0间的音量值，或查询当前音量值

currentTime--以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置

方法

load() ---加载音频、视频软件

paly() ---播放

pause()---暂停

canPlayType(obj) ----测试饭后指定指定的Mime类型的文件

事件

loadstart ---客户端开始请求数据

progress----正在播放的时候不停触发，如果暂停不会触发，触发的时间间隔比较大

play------play()和autopaly播放时，类似事件onplaying

pause-----pause()方法触发时

ended-----当结束播放时

timeupdate----当前播放时间发生改变的时候，播放中常用的时间处理，如果暂停不会触发，触发的时间间隔比较小

canplaythrough---歌曲已经载入完成

canplay -----缓冲至可播放状态，类似事件onloadedmetadata
onloadedmetadata----当元数据（比如分辨率和时长）被加载时运行的脚本

    <style>

        #volumeSlider .slider-selection {

           background:#bababa;

        }

    </style>

    <div class="container">

        <p>../content/audio/海阔天空.mp3</p>

        <button class="btn btn-primary" id="playBtn">

            <i class="glyphicon glyphicon-play"></i>

        </button>

        <button class="btn btn-info" id="mutedBtn">

            <i class="glyphicon glyphicon-volume-down"></i>

        </button>

        <button class="btn btn-danger" id="changeBtn">切换歌曲</button>

        <div class="form-group">

            <label class="control-label">音量：</label>

            <input class="form-control" id="volume" data-slider-id="volumeSlider"

                   data-slider-min="0" data-slider-max="100" data-slider-step="1"

                   />

        </div>

    </div>

    <audio id="myAudio"></audio>

var currentFile = '../content/audio/海阔天空.mp3';

//判断浏览器是否支持audio

if (!window.HTMLAudioElement) {

alert('您的浏览器不支持audio标签');

} else {

var myAudio = document.getElementById('myAudio');

//播放/暂停按钮

$('#playBtn').click(function () {

    var icon = $(this).find('i');

    //播放

    if (myAudio.paused) {

        //如果延迟指定src的话，会在播放前有较长的等待

        if (myAudio.src.length <= 0) {

            myAudio.src = currentFile;

        }

        myAudio.play();

        icon.removeClass('glyphicon-play').addClass('glyphicon-pause');

    } else {

        myAudio.pause();

        icon.addClass('glyphicon-play').removeClass('glyphicon-pause');

    }

});

//静音按钮

$('#mutedBtn').click(function () {

    var icon = $(this).find('i');

    icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');

    myAudio.muted = !myAudio.muted;

});

//音量按钮

$('#volume').slider({

    value: myAudio.volume * 100

}).on('change', function (e) {

    var value = e.value.newValue / 100;

    myAudio.volume = value;

});

$('#changeBtn').click(function () {

    //使用在线文件

    myAudio.src = 'http://m5.file.xiami.com/523/78523/1136455538/1774490672_16884267_l.mp3?auth_key=61ade10d6a7508618ab53fe2aaa39b8c-1478919600-0-null';

    myAudio.play();

});

//监听事件

myAudio.oncanplay = function () {

    console.info('进入可播放状态,音频总长度:' + myAudio.duration);

}

myAudio.onplay = function () {

    console.info('开始播放：' + myAudio.currentTime);

}

myAudio.onpause = function () {

    console.info('暂停播放：' + myAudio.currentTime);

}

myAudio.onprogress = function () {

    //console.info(myAudio.buffered);

    //console.info('正在播放：' + myAudio.currentTime);

}

myAudio.ontimeupdate = function (e) {

    console.info('播放时间发生改变：'+myAudio.currentTime);

}

}