微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决为什么它不读取 JavaScript 中的音频源?

我提出一个问题。谁知道,为什么我不阅读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 举报,一经查实,本站将立刻删除。