为什么它不读取 JavaScript 中的音频源？

编程问答 2022-05-30

问题描述

我提出一个问题。谁知道，为什么我不阅读Audio src的代码有什么问题？我敢打赌，重点是源是没有给定持续时间的收音机的流网址，但我不知道自己，所以我可能是错的

源代码和完整代码链接：CodePan

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.js"></script>
<canvas id="rectangle" width="300" height="170"></canvas>
<canvas id="visualizer" width="300" height="170"></canvas>
<audio id="source" src="https://stream.open.fm/361" autoplay="true" controls></audio>

JavaScript 代码

var useMic = false;
var visualizer = document.getElementById("visualizer");
var canvas = document.getElementById("rectangle");
var ctx = canvas.getContext("2d");
ctx.fillRect(20,20,40,16);

let audio,buttton,fft,lineSpace;
function toggleSong(){
  if(audio.isPlaying()){
    audio.pause();
  }else{
    audio.play();
  }
}

function preload(){
  audio = document.getElementById("source").src;//loadSound('https://stream.open.fm/361');
}

function setup(){
  createCanvas(1200,600);
  colorMode(HSB);
  filter(BLUR,100);
  audio.play();  
  fft = new p5.FFT(0.9,64);
  lineSpace = (width/2) / 64;
}

function draw(){
  background(0);
  
  let spectrum = fft.analyze();
  for (let i = 0; i < spectrum.length; i++) {
    fill(i*3,255,255); //fill(i,255);
    let amp = spectrum[i];
    let y = map(amp,256,height,350);
    rect((width/2) + (i * lineSpace),y,lineSpace,height - y);
    rect((width/2) - (i * lineSpace),height - y);
  }
}

function touchStarted(){
  getAudioContext().resume();
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

audiohtmljavascriptp5.jsvisualizer