HTML5 <Audio>标签API整理(一)

 简单实例:

    <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>

Api说明:

1.如果需要显示缓存进度,可以参考:HTML5 Media事件

2.不能控制音频的二进制数据,如果需要处理二进制音频数据,参考HTML5 WebAudioAPI简介(一)

只读属性
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----当元数据(比如分辨率和时长)被加载时运行的脚本

 更多属性

audioTracks----返回表示可用音频滚到的AudioTrackList对象。

controller---返回表示音频大年媒体控制器的MediaController对象。

crossOrigin---设置或返回音频的CORS设置

defaultMuted---设置或返回音频默认是否静音

defaultPlaybackRate---设置或返回音频的默认播放速度

mediaGroup---设置或返回音频叔叔的美肌组合的名称

networkState---返回音频的当前网络状态

playbackRate---设置或返回音频的播放速度。

seekable---返回标识音频可寻址不烦的TimeRanges对象

seeking---返回用户当前收正在音频中进行查找。

textTracks---返回标识文本滚到的TextTrackList对象

 

更多方法

load()----重新加载音频元素

getStartDate()----返回新的Date对象,表示当前时间线偏移量。

fastSeek()---在音频播放器中指定播放时间。

addTextTrack()----想音频添加新的文本轨道。

更多参考:http://caibaojian.com/html5-audio.html

实例1:

    <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>

js代码:

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);
}
}

显示结果:

posted @ 2016-11-05 14:41  天马3798  阅读(12002)  评论(2编辑  收藏  举报