zoukankan      html  css  js  c++  java
  • 一种实现无缝循环播放音乐方案

    场景:

    为了节省页面资源,往往需要将一段小音频循环播放,通常做法是在audio标签上添加loop属性,但不幸的是,该属性并不能保证无缝循环(gapless looping)播放,明显的感觉到中间的停顿。

    解决方案:

    使用audio标签的Web API提供的方法和属性进行循环播放,具体如下

    事件名称 事件作用
    timeupdate 当前播放的时长发生改变时触发
       
     

    属性名称 属性作用
    currentTime                 用来获取或控制当前播放的时间,单位为s
    duration 获取媒体文件的总时长,以s为单位,如果无法获取,返回NaN

    主要监听timeupdate事件,然后比较播放时间属性currentTime和音频的时长属性duration,在快要结束的时候,将currentTime属性重新设置为0,代码如下:
    // 使用web audio API
    var audio_file = new Audio('./videos/bg.mp3');
    audio_file.play();
    audio_file.addEventListener('timeupdate', function(){
        var buffer = 1.2;
        if(this.currentTime > this.duration - buffer){
            this.currentTime = 0;
            this.play();
        }}, false);
     
    使用要求:
    (1)音乐尽量是「淡入淡出」型,重音尽量不要在开头或结束位置,否则,即使能将音乐循环播放,也会感觉不衔接;
    (2)API接口只能用于webkit内核,比较新的浏览器 
  • 相关阅读:
    source命令
    bash中单引号与双引号的总结
    鸟哥的linux私房菜学习笔记3
    鸟哥的linux私房菜学习笔记2
    /usr/sbin/atd 和 /etc/init.d/atd有什么区别
    Linux中/etc/fstab /etc/mtab /proc/mounts这三个文件的分析与比较
    服务器本机不能登陆的解决
    有用的博客
    推荐几个好用的PHP集成开发环境
    ANDROID开发笔记(二)
  • 原文地址:https://www.cnblogs.com/wmhuang/p/5452640.html
Copyright © 2011-2022 走看看