html5中audio的详细使用

html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定
最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, 因为我需要的功能很简单,所以做的不复杂,如果要使用更多的功能,可以参考下面的api,能实现很多高大上的功能
audio 相关的 api

备用(当浏览器不支持audio时显示的内容)

控制函数功能说明

修改source的值后需要audio.load();重新加载音频才会播放

load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
play() 加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件
audio 的只读媒体特性有:

只读属性属性说明

duration 获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
paused 如果媒体文件被暂停,则返回true,否则返回false
ended 如果媒体文件播放完毕,则返回true
startTime 返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currentSrc 以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

audio 可脚本控制的特性值:

autoplay 自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放,或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性
对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3.幸好Google的chrome都支持。

audio的事件:
oncanplay 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
onerror 当在元素加载期间发生错误时运行脚本
ontimeupdate 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
还有其他方法看w3c

关于ios不支持预加载的问题

ios不支持预加载真的很操蛋,当点击播放的时候音频没加载完成,但是我通过监听音频的play事件或者onplaying(当媒介数据已开始播放时运行脚本)发现在ios上音频没有播放,但是这事件已经执行了,所以又重新监听了canplaythrough事件(当视频可以正常播放且无需停顿时执行 JavaScript)来给音频播放之前加loading效果

     this.$refs.audio.addEventListener('loadstart', () => {
      console.log('onloadstart')
      this.$refs.playImg.classList.add('disabled')
    })
    this.$refs.audio.addEventListener('canplaythrough', () => {
       console.log('canplaythrough')
       this.$refs.playImg.classList.remove('disabled')
    })
<audio controls="controls" preload="auto">
    // preload="auto"设置为预加载的 audio 元素
<div id="audioControl">  
    <div class="play">  
        <span id="play">Play</span>  
    </div>  
</div>  

 <audio  id='media'>
   <source src="song.mp3" type="audio/mpeg">
   <source src="song.ogg" type="audio/ogg">
 </audio>

var media = $('#media')[0];  
var audioTimer = null;  

//绑定播放暂停控制  
$('.play').bind('click', function() {  
    playAudio();  
});   

//播放暂停切换  
function playAudio() {  
    if(media.paused) {  
        play();  
         // 当前的播放,其他的音乐都暂停
                    for(var i= 0;i<$('audio').length;i++){
                        if(i!==index){    //index表示当前播放的audio的索引值
                          $('audio').eq(i)[0].pause();
                          $('audio').eq(i)[0].currentTime = 0;
                          $('.item .list').eq(i).find('.play').removeClass('on');
                        }
                    }
    } else {  
        pause();  
    }  
}  

//播放  
function play() {  
    media.play();  
    $('#play').html('Pause');  
}  

//暂停  
function pause() {  
    media.pause();  
    $('#play').html('Play');  
}  

音频的倍速播放 playbackRate

myVid=document.getElementById(“video1”);
myVid.playbackRate=0.5;

发布了53 篇原创文章 · 获赞 11 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览