快活林资源网

HTML5开发动态音频图的实现
网页制作 2024/12/23 佚名
3 1
快活林资源网 Design By www.csstdc.com

概要

本次我们会使用html5和js开发一个动态音频图

用到的技术点：
（1）js
（2）canvas + audio
（3）Web Audio API

实现方式：

（1）首先对于界面实现的考虑，由于区块非常多，我们使用传统dom节点实现是非常困难的（会占用大量的电脑CPU）。在这里，我们考虑使用canvas进行渲染
（2）前端中，我们遵循尽量少用js控制dom节点的原则。能用css3实现的特效，就不要用js实现。（因为js不是标记语言，而是脚本语言，与html5不是同一种语言。会浪费浏览器大量时间加载，造成浏览器性能的浪费）。因此，用js就少用dom，用dom就尽量用css。
（3）通过Web Audio API在音频节点上进行音频操作（即实现音频可视化），流程图如下：

HTML5开发动态音频图的实现

在图中，音频上下文提供了音频处理的一套系统方法。输入源指音乐文件，通过名称引入；效果就是对输入源进行加工，如制作音频图、音波图、3D环绕、低音音效等；输出就是把效果输出到耳机、扬声器等目的地。

canvas引入

在当下，除了布局使用dom节点外，特效基本都是通过canvas实现了。

canvas好处：
（1）写特效非常强大，性能优
（2）用于做游戏。由于flash将于2020年退役，现在的游戏开始转向用html5制作
（3）前端渲染大数据，数据可视化，大屏数据展示

canvas流程：通过js创建画笔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        *{
            margin: 0;
            /* 外边距为0，使canvas能够占满全屏 */
        }
        #canvas{
            background: linear-gradient(
                135deg,
                rgb(142,132,133) 0%,
                rgb(230,132,110) 100%
            );
            /*创建线性渐变图像*/
        }
        
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
        var cxt=canvas.getContext('2d');//创建了画笔
        cxt.beginPath();//开始画
        cxt.closePath();//画完了
        
        cxt.fillStyle='#f2f';
        cxt.arc(250,250,100,0,2*Math.PI,false);
        cxt.fill();
    </script>
</body>
</html>

在创建线性渐变图像时，若100%后边加“,”，谷歌便加载不出来；若不加，便能加载出来。但是不知道为何

这里尤其注意js里canvas的流程，创建画笔-》开始画-》画完了-》补充颜色、形状信息。其中前三步都是套路，只有如何去画根据任务的不同，代码不同

Web Audio APi流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio id="audio" src="mp3/1.mp3" controls></audio>

    <script>
        
        
        var oCtx=new AudioContext();//创建音频对象

        var oAudio=document.querySelector('audio');
        var audioSrc=oCtx.createMediaElementSource(oAudio);
        //给音频对象创建媒体源

        var analyser=oCtx.createAnalyser();//创建分析机
        audioSrc.connect(analyser);//把分析机连接到媒体源上
        analyser.connect(oCtx.destination);//把分析机得到的结果和扬声器相连

    </script>
</body>
</html>

这里要注意的是，audio中的autoplay、js中的audio.play（）已经失效（谷歌浏览器的安全策略：声音不能自动播放，必须在用户有了操作后才能播放）

上述流程中少了最关键的一步：如何分析音频数据，这一步根据实现的任务不同，内容不同。但是其余的步骤都是一样的，满满的套路

动态音频图的开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
        }
        #canvas{
            background:linear-gradient(
                135deg,
                rgb(142,132,133) 0%,
                rgb(230,132,110) 100%
            );
        }
    </style>
</head>
<body>
    <audio id="audio" src="mp3/1.mp3" controls></audio>
    <button type="button" onclick="play()"></button>
    <canvas id="canvas"></canvas>

    <script>
        //先引入canvas画笔的创建流程
        var cCxt=canvas.getContext('2d');//创建2D画笔
        cCxt.beginPath();//开始画
        cCxt.closePath();//画完了

        //设计画布的样式
        //设置画布大小为整个屏幕
        canvas.width=window.innerWidth;
        canvas.height=window.innerHeight;
        //设置线条的渐变颜色
        var oW=canvas.width; var oH=canvas.height;
        var color=cCxt.createLinearGradient(oW/2,oH/2,oW/2,oH/2-100);
        color.addColorStop(0,'#000');
        color.addColorStop(.5,'#069');
        color.addColorStop(1,'#f6f');

        
        function play(){
            //先引入API函数,走完Web Audio API的流程
            var oCtx=new AudioContext();//创建音频对象
            var oAudio=document.querySelector('audio');
            var audioSrc=oCtx.createMediaElementSource(oAudio);//为音频对象创建媒体源
            var analyser=oCtx.createAnalyser();//为音频对象创建分析机
            audioSrc.connect(analyser);//将分析机与媒体源连接
            analyser.connect(oCtx.destination);//将分析机与扬声器相连接
            var count=80;//音频条的条数
            var voiceHeight=new Uint8Array(analyser.frequencyBinCount);//建立一个数据缓冲区（此时为空)
        
            setInterval(draw(analyser,voiceHeight,count),1000);
            oAudio.play();
        
         }

        function draw(analyser,voiceHeight,count){
            analyser.getByteFrequencyData(voiceHeight);//将当前频率数据传入到无符号字节数组中，进行实时连接
            var step=Math.round(voiceHeight.length/count);//每隔step个数，取一个数组里的数
            for(var i=0;i<count;i++){
                var audioHeight=voiceHeight[step*i];
                cCxt.fillStyle=color;
                cCxt.fillRect(oW/2+(i*10),oH/2,7,-audioHeight);
                cCxt.fillRect(oW/2-(i*10),oH/2,7,-audioHeight);
             }
           //console.log(voiceHeight);
        }
        

        
    </script>
</body>
</html>

上边的代码是不可行的，找了一下午也没找出错误到底出在哪里...问题主要如下：

（1）在谷歌浏览器中，显示歌在播放，但是没有声音。console.log(voiceHeight)即图中注释部分没有注释掉时，voiceHeight只出现一次，而不是1000ms出现一次。没有图像

（2）在edge浏览器中，歌曲能正常播放。voiceHeight仍然只出现一次，没有图像

HTML5开发动态音频图的实现

HTML5开发动态音频图的实现

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com