音视频交互

一、实验内容：

音频可视化，是指一种以视觉为核心，以音频为载体，以大众为诉求对象，借助多种新媒体技术等传播媒介，通过画面、影像来诠释音乐内容的、视听结合的大众化传播方式。它能为理解、分析和比较音频作品形态的表现力和内外部结构提供的一种直观视觉呈现的技术。

将麦克风获取到的声音转变成图像
获取所需的目标音频信息
将振幅转化为波形与环形的振幅
其他的是通过声音的大小，获取音频的振幅信息，向绘制圆形的大小参数传递声音振幅的值，以达到不同声音大小的圆形。
通过获取音频的振幅信息，将振幅信息传参到小球跳高的高度参数，以达到小球不同声音大小时所调高的高度不同。

主要运用的获取音频信息的函数为mic.getLevel()函数。

通过像素阵列，进行摄像头影像像素化。利用Pixels数组中存放了每个像素的位置及RGB信息。

本次实验为自选课题，主题为音视频交互。

需提交以下内容：

评价标准：

音频交互35分（准确性，难度综合评价）

视频交互35分（准确性，难度综合评价）

代码规范10分

实验报告20分

二、实验说明：

所有实验是通过 Visual Studio Code引入p5.js包编写，所以首先要去p5.js官网下载相关包，或是在联网状态下把html中引入包的代码改成例如<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>等。

三、实验代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>交互</title><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.js"></script><!-- <script src="p5.sound.js"></script> --><!-- <script src="p5.dom.js"></script> -->
</head><body><script src="sketch.js"></script><!-- <script src="sketch2.js"></script> -->
</body></html>

//sketch.js
//音频交互
var capture;
var mic;
var volhistory=[];function setup(){// createCanvas(240,180);// capture = createCapture(VIDEO);let cnv = createCanvas(400, 400);// cnv.mousePressed(userStartAudio);// textAlign(CENTER);angleMode(DEGREES);cnv.mousePressed(userStartAudio);textAlign(CENTER);//amp = new p5.Amplitude();//mic = new p5.AudioIn();mic.start();//amp.setInput(mic);//}function draw(){// image(capture,0,0,width,height);//小球跳高background(0);fill(255);text('tap to start', width/2, 20);micLevel = mic.getLevel();var y = height - micLevel * height;ellipse(width/2, y, 10, 10);//小球放大//background(0);//fill(255);var vol = mic.getLevel();ellipse(100, 100, vol*200, vol*200);//横向音频volhistory.push(vol);stroke(255);noFill();beginShape();for(var i = 0;i<volhistory.length;i++){var y = map(volhistory[i],0,1,350,0);vertex(i, y)}if(volhistory.length>width-50){volhistory.splice(0,1);}stroke(255, 0,0);line(volhistory.length, 0, volhistory.length, height);stroke(255);endShape();//360度音频translate(width/2, height/2);beginShape();for(var i = 0;i<360;i++){var r = map(volhistory[i],0,1,10,100);var x = r*cos(i);var y = r*sin(i);vertex(x, y)}if(volhistory.length>360){volhistory.splice(0,1);}endShape();}

//sketch2.js
//视频交互
var video;
var vScale = 16;function setup() {createCanvas(640, 480);// capture = createCapture(VIDEO);// capture.hide();//图像隐藏pixelDensity(1);//高像素密度video = createCapture(VIDEO);video.size(width / vScale, height / vScale);}function draw() {//黑白图像background(51);video.loadPixels();loadPixels();for (var y = 0; y < video.height; y++) {for (var x = 0; x < video.width; x++) {var index = (x + y * video.width) * 4;var r = video.pixels[index + 0];var g = video.pixels[index + 1];var b = video.pixels[index + 2];var bright = (r + g + b) / 3;var w = map(bright, 0, 255, 0, vScale);noStroke();fill(bright);rect(x * vScale, y * vScale, w, w);pixels[index + 0] = r;pixels[index + 1] = g;pixels[index + 2] = b;pixels[index + 3] = 255;}}// updatePixels();}

sketch.js音频交互；sketch2.js视频交互，需要自行在html文件中修改切换

四、实验结果：

互动应用开发p5.js——音视频交互相关推荐

互动应用开发p5.js——WebGL太阳系
WebGL太阳系一.实验内容: 完成一个太阳系场景,其中至少有三个球体,一个表示太阳,一个表示地球,一个表示月亮:地球不停地绕太阳旋转,月亮绕地球旋转,星球本身有自转.可添加纹理,纹理自行从网络搜寻 ...
【新知实验室-TRTC开发】实时音视频之web端云监工系统（Vue3+Element plus+TS+Pinia）
在线上线下一体化.虚拟现实加速融合的趋势下,音视频已经演进成一种基本能力,深刻变革了社会的交互方式.未来,音视频作为全真互联时代的重要基石,将持续推动互联网和实体产业的数字化创新与升级. 今天我们将体 ...
【新知实验室-TRTC开发】实时音视频之集美真心话
目录前言: 一.说说TRTC呗语音互动直播语聊房语音电台二.成为TRTC的体验官 1.1分钟了解TRTC产品 2.2分钟新手入门 3.别忘了入场券,也别告诉别人哦三.3分钟完成新应用搭建 ...
音视频开发进阶指南--音视频概念基础
音视频开发进阶指南--音视频概念基础音频概念基础: 采样.量化和编码: 首先要对模拟信号进行采样,所谓采样就是在时间轴上对信号进行数字化.根据奈奎斯特定理(也称为采样定理),按比声音最高频率高2倍以 ...
如何从开发小白到音视频专家
如何从开发小白到音视频专家原文地址:http://blog.csdn.net/dev_csdn/article/details/78738806 作者:卢俊,七牛云客户端团队技术负责人.拥有丰富的音 ...
(转)从开发小白到音视频专家
从开发小白到音视频专家转载:https://blog.csdn.net/zhangbijun1230/article/details/83658012 本文整理自卢俊的演讲,目标读者是对音视频开发感 ...
腾讯互动白板+即时通讯+实时音视频，Android学生端接入
腾讯互动白板+即时通讯+实时音视频,Android学生端接入一.简介线上教学方案:腾讯云互动白板(Tencent Interactive Whiteboard,TIW)+即时通信(Instant ...
java音视频开发技术_FFmpeg音视频核心技术精讲与实战
百度网盘2 D2 h2 i; n# o0 D# M* C! [: B1 M 第1章学习指南[课程提供200+问题与答案库]4 a# t% { h6 ^: E# O [你遇到的坑,别人已经出坑了,课 ...
linux视频应用程序开发,Linux平台音视频开发和音视频SDK应用
Linux平台音视频开发和音视频SDK应用下面介绍一款强大的音视频即时通讯平台给大家,它就是--云智真音视频SDK. 云智真提供一套跨平台的音.视频即时通讯解决方案,基于先进的H.264视频编码标准 ...

互动应用开发p5.js——音视频交互