专栏首页web编程技术分享【H5 音乐播放实例】第五节 音轨制作

【H5 音乐播放实例】第五节 音轨制作

我就不瞎比比了,直接上代码吧:

//获取随机颜色
function randomColor(){
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    return "rgb("+r+","+g+","+b+")";//IE7不支出rgb
};

window.onload = function(){

    //给音乐播放器(audio)添加一个timeupdate时间
    document.getElementById("music").ontimeupdate = function(){

        var currentTime = Math.floor(this.currentTime); //获取当前时间

       
        var m = parseInt(currentTime / 60);//分钟
        var s = parseInt(currentTime % 60);//秒钟
        var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化

        //console.log(time); //打印出来看看

        // 百分比 = 当前时长 ÷ 总时长 × 100%
        var total = this.duration;//总时长
        //console.log(currentTime + '=======' + total);
        //console.log( Math.floor(currentTime / total * 100) + "%" );


        document.getElementsByClassName("progress")[0].style.width = Math.floor(currentTime / total * 100) + "%" ;

    }

    //音轨制作

    var box = document.getElementsByClassName('mbox')[0];  //获取承载音轨的父盒子

    var allWidth = box.clientWidth;//获取承载音轨盒子的宽度

    var itemWidth = 5;


    var len = (allWidth / itemWidth );     //计算一共出现多少条音轨 

    var html = '';                  //动态拼接音轨

    for(var i = 0;i < len ; i ++){
        html+="<span class='item' style='left:"+(i * itemWidth)+"px;background:"+randomColor()+";'></span>";
    }

    box.innerHTML += html;           //添加音轨

    var audio = document.getElementById("music");

    //1:音频上下文
    window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
    /*动画执行的兼容写法*/
    window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;


    //2:初始化音轨对象
    var audioContext = new window.AudioContext();

    var flag = null; //控制是否解析的开关变量

    //拿到播放器去解析音乐文件
    var audioBufferSouceNode = audioContext.createMediaElementSource(audio);

    audio.onplay = function(){
        flag = true;
        //创建解析对象
        var analyser = audioContext.createAnalyser();
        parse(analyser,function(array){
            console.log(array); //打印解析出来的音轨节点
            for(var i = 0;i < len ; i ++){
                document.getElementsByClassName('item')[i].style.height = array[i] + 'px';
            }
        });
    }

    audio.onpause = function(){
        for(var i = 0;i < len ; i ++){
            document.getElementsByClassName('item')[i].style.height = 1 + 'px';
        }
        flag = false;
    }


    function parse(analyser,callback){
        if(!flag){
            return;
        }
        audioBufferSouceNode.connect(analyser); 
        analyser.connect(audioContext.destination);
        var array = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        if(callback) callback(array);
        requestAnimationFrame(function(){
            parse(analyser,callback);
        });
    }

}

css:

.item {
    position:absolute;
    width:5px;
    height:1px;
    left:0px;
    bottom:0px;
    opacity: 0.5;
}

效果:

总结思路

1.获取mbox的宽度,然后动态计算一共有多少条音轨。
2.用H5的音频解析器去解析当前音乐播放的各频率的音高
3.用这些音高去给每一条音轨动态地设置高度height

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【大结局】《从案例中学习JavaScript》之酷炫音乐播放器(四)

    剽悍一小兔
  • 小兔JS教程(五) 简单易懂的JSON入门

    剽悍一小兔
  • js常用方法和一些封装(2) -- 随机数生成

    剽悍一小兔
  • 全民刷军装背后的AI技术及简单实现

    昨天有Design-AI-Lab用户后台留言,问为什么换军装的h5这么火,但没见到有技术文章分析如何实现。 我回复说,大概是比较简单吧,主要工作是图像合成。 ...

    mixlab
  • 微信小程序体验3D物理引擎-ammo.js

    点击体验3D物理引擎bullet的javascript版本。源码参考了:https://github.com/THISISAGOODNAME/learn-amm...

    周星星9527
  • js知识点总结--这些你都了解了吗?

    js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言,常用来给html网页添加动态功能,如响应用户的各种操...

    7537367
  • shell脚本中各种括号的区别以及用法

    最近学到了shell脚本编程,觉得脚本中的不同括号有不同的用处,以及有些括号的格式也有特殊要求,下面我就总结一下各种括号的用法。

    用户4877748
  • ol中闪烁点动画的实现

    实现如图的动画,可以用两种思路: 1.overlay+css3动画实现; 2.canvas动画实现。

    lzugis
  • Javascript快速入门(上篇)

    Javascript的熟练之路,小弟来了。 ? JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,...

    用户1216676

扫码关注云+社区

领取腾讯云代金券