• 站长首页
  • 源码下载
    HTML源码 ASP源码 PHP源码 .NET源码 VIP源码
  • 网站模板
    织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板
  • 站长素材
    字体下载 高清图片 网页模板 PSD素材 矢量素材
  • 网页特效
    返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效
  • 站长资讯
    网站运营 建站经验 搜索优化 互联网
登陆| 注册
快捷导航

源码下载

HTML源码 ASP源码 PHP源码 .NET源码

网站模板

织梦模板 ShopEx模板 EcShop模板 Discuz模板

站长素材

字体下载 高清图片 网页模板 PSD素材

网页特效

返回顶部 图片代码 鼠标特效 菜单导航

站长资讯

网站运营 建站经验 搜索优化 互联网

软件下载

电脑软件 安卓软件 苹果软件

建站工具

WEB服务器 网页设计 FTP工具 建站辅助

建站教程

服务器教程 CMS教程 脚本之家
80站长网

微擎小程序商城企业响应图片响应式帝国优化as

发布特效
  • 站长首页

  • 源码下载

  • 网站模板

  • 站长素材

  • 网页特效

  • 站长资讯

  • 软件下载

  • 建站工具

  • 建站教程

  • 程序插件

  • 网站基础

  • 帮助中心

HTML源码 ASP源码 PHP源码 .NET源码 VIP源码 其他源码

织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板 WordPress主题

字体下载 高清图片 网页模板 PSD素材 矢量素材 免抠素材 PPT模板

返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效 css3特效 日期时间 选项卡_滑动门 HTML5小游戏 动画效果 表单按钮 jquery特效

网站运营 建站经验 搜索优化 互联网

电脑软件 安卓软件 苹果软件

WEB服务器 网页设计 FTP工具 建站辅助

服务器教程 CMS教程 脚本之家

shopex插件 Discuz!插件 wordpress插件 phpcms插件 ecshop插件 dedecms插件

HTML教程 DIV&CSS Javascript/Ajax Dreamweaver XHTML教程 W3C教程

关于我们 联系我们 广告服务 投稿指南 友情链接 积分金币规则 加入VIP会员

当前位置:网站首页 > 网页特效 > HTML5特效 > html5 canvas+js音频可视化动画特效

html5 canvas+js音频可视化动画特效

2020-07-31
特效详情:
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果。

js代码

<script type="text/javascript">
 
window.onload = function () {
 
 var file = document.getElementById("file");
 var audio = document.getElementById("audio");
 
 file.onchange = function () {
     //part1: 画布
     var canvas = document.getElementById("canvas");
     var context = canvas.getContext("2d");
 
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     var WIDTH = canvas.width;
     var HEIGHT = canvas.height;
 
     //part2: 音频
     var files = this.files;//声音文件
     audio.src = URL.createObjectURL(files[0]);
     audio.load();
 
     //part3: 分析器
     var AudCtx = new AudioContext();//音频内容
     var src = AudCtx.createMediaElementSource(audio);
     var analyser = AudCtx.createAnalyser();
 
     src.connect(analyser);
     analyser.connect(AudCtx.destination);
     analyser.fftSize = 128;//快速傅里叶变换, 必须为2的N次方
 
     var bufferLength = analyser.frequencyBinCount;// = fftSize * 0.5
 
     //part4: 变量
     var barWidth = (WIDTH / bufferLength) - 1;//间隔1px
     var barHeight;
 
     var dataArray = new Uint8Array(bufferLength);//8位无符号定长数组
 
     //part5: 动态监听
     function renderFrame() {
         requestAnimationFrame(renderFrame);//方法renderFrame托管到定时器,无限循环调度,频率<16.6ms/次
 
         context.fillStyle = "#000";//黑色背景
         context.fillRect(0, 0, WIDTH, HEIGHT);//画布拓展全屏,动态调整
 
         analyser.getByteFrequencyData(dataArray);//获取当前时刻的音频数据
 
         //part6: 绘画声压条
         var x = 0;
         for (var i = 0; i < bufferLength; i++) {
             var data = dataArray[i];//int,0~255
 
             var percentV = data / 255;//纵向比例
             var percentH = i / bufferLength;//横向比例
 
             barHeight = HEIGHT * percentV;
 
             //gbk,0~255
             var r = 255 * percentV;//值越大越红
             var g = 255 * percentH;//越靠右越绿
             var b = 50;
 
             context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
             context.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
 
             x += barWidth + 1;//间隔1px
         }
     }
 
     renderFrame();
 
     //part7: 播放声音
     audio.play();
 };
};
</script>
特效图集
    特效标签:

    音频 音频播放 可视化

    • 上一篇:css3+html5 svg粘稠水气泡背景动画特效
    • 下一篇:html5 svg+js创意圆环数字时钟动画特效
    特别说明:

    推荐使用第三方专业下载工具下载本站资源,使用 WinRAR v3.10 以上版本解压本站资源。
    80站长网所有软件,源码,素材,等资源均来自网友上传,或网络收集,如果有侵犯版权请及时联系我们,我们会在第一时间处理。
    如果该资源不能下载,请联系本站在线客服报错,谢谢合作!!
    下载本站资源,如果服务器暂不能下载请过一段时间重试!
    本站提供的一些商业源码,软件,等资源仅供学习研究之用,如用于商业用途,请购买正版。
    如需大量转载本站内容;请联系本站站长,少量转载本站内容请注明出处,谢谢合作。

    相关特效

    • html5+css3炫酷文字跑马灯动画特效
      html5+css3炫酷文字跑马灯动画特效

      HTML5特效 /2019-03-12

      html5全屏幻灯片图片切换动画效果
      html5全屏幻灯片图片切换动画效果

      HTML5特效 /2018-01-08

      html5 canvas+js刻度尺代码
      html5 canvas+js刻度尺代码

      HTML5特效 /2020-01-03

      html5 svg绘制星空火箭恒星动画特效
      html5 svg绘制星空火箭恒星动画特效

      HTML5特效 /2019-08-02

      HTML5手机端万年历下载
      HTML5手机端万年历下载

      HTML5特效 /2018-08-07

      html5 svg+TweenMax彩色五角星跟随鼠标移动特效
      html5 svg+TweenMax彩色五角星跟随鼠标移动特效

      HTML5特效 /2019-12-20

      html5 svg+js创意圆环数字时钟动画特效
      html5 svg+js创意圆环数字时钟动画特效

      HTML5特效 /2020-07-31

      html5+CSS3实现的超炫酷的登录表单
      html5+CSS3实现的超炫酷的登录表单

      HTML5特效 /2018-12-11

  • 特效信息
  • 免费资源
  • 所需积分: 0 积分
    下载权限:无等级限制
    特效作者:不详
    特效大小:4 KB
    运行环境:HTML5
    特效授权:免费特效
    推荐等级:
    点击下载 查看演示

    特效分类

    • 返回顶部
    • 图片代码
    • 鼠标特效
    • 菜单导航
    • HTML5特效
    • css3特效
    • 日期时间
    • 选项卡_滑动门
    • HTML5小游戏
    • 动画效果
    • 表单按钮
    • jquery特效

    热门标签

      音量 表单验证 万圣节 旋转动画 video CSS波浪动画 音频 动画边框 走马灯 音乐 时光 蝴蝶 圆圈 CSS3加载动画 打分 MP3播放器 评分 动画线条 飞机大战 像素
    返回
    顶部
    联系我们 投稿指南 专家专栏 热门标签 广告投放 友情链接

    备案号:辽ICP备16013735号-1 公安备案号辽公网安备 21010402000253号

    Copyright © 2016-2018 80站长网 版权所有

    ×
    ×