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

你的名字 2023-10-01 15:49 36阅读 0赞

## 音视频交互 ##

### 一、实验内容： ###

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

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

主要运用的获取音频信息的函数为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>
    
    
    	
    	
    </head>
    
    <body>
    	
    	<script src="sketch.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文件中修改切换**

### 四、实验结果： ###

![4f9db69b004248088cf61662d1201944.png][] ![2093b7b75c984430abe2c2d7270aa85f.png][]

![ebcd2ef7dfc245da939cc8a285625047.png][]

[4f9db69b004248088cf61662d1201944.png]: https://img-blog.csdnimg.cn/4f9db69b004248088cf61662d1201944.png
[2093b7b75c984430abe2c2d7270aa85f.png]: https://img-blog.csdnimg.cn/2093b7b75c984430abe2c2d7270aa85f.png
[ebcd2ef7dfc245da939cc8a285625047.png]: https://img-blog.csdnimg.cn/ebcd2ef7dfc245da939cc8a285625047.png