HTML5开发动态音频图的实现


Posted in HTML / CSS onJuly 02, 2020

概要

本次我们会使用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开发动态音频图的实现

到此这篇关于HTML5开发动态音频图的实现的文章就介绍到这了,更多相关HTML5动态音频图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 #HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 #HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 #HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 #HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 #HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 #HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 #HTML / CSS
You might like
thinkphp控制器调度使用示例
2014/02/24 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python sys模块常用方法解析
2020/02/20 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
python编程的核心知识点总结
2021/02/08 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
新三好学生主要事迹
2014/01/23 职场文书
精彩的英文自荐信
2014/01/30 职场文书
户外婚礼策划方案
2014/02/08 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
教师自我鉴定范文
2014/03/20 职场文书
小学班主任评语大全
2014/04/23 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS