Javascript 我的音频可视化工具没有'；在chrome中不起作用（但在firefox中起作用）_Javascript_Html_Web Audio Api

Javascript 我的音频可视化工具没有'；在chrome中不起作用（但在firefox中起作用）

javascript html

Javascript 我的音频可视化工具没有'；在chrome中不起作用（但在firefox中起作用）,javascript,html,web-audio-api,Javascript,Html,Web Audio Api,我有这个音频可视化工具（我希望它脱离画布，只使用div块来获得更好的外观）。它可以在firefox中工作，但当我在chrome中运行它时，我收到一条错误消息“加载资源失败：服务器响应状态为404（未找到）”，该消息位于favicon。ico:1？？？一点也不知道位置意味着什么 ''' 音乐台 window.AudioContext=window.AudioContext | | window.webkitadiocontext；设audioCtx=newaudiocontext（）； var

我有这个音频可视化工具（我希望它脱离画布，只使用div块来获得更好的外观）。它可以在firefox中工作，但当我在chrome中运行它时，我收到一条错误消息“加载资源失败：服务器响应状态为404（未找到）”，该消息位于favicon。ico:1？？？一点也不知道位置意味着什么

'''


音乐台
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
设audioCtx=newaudiocontext（）；
var music=document.getElementById（“播放器”）；
var canvas=document.getElementById（“soundCanv”）；
var canvasCtx=canvas.getContext（“2d”）；
var myAudio=document.querySelector（'audio'）；
var Analyzer=audioCtx.createAnalyzer（）；
//var source=audioCtx.createMediaStreamSource（music.captureStream（））；
var source=audioCtx.createMediaElementSource（myAudio）；
源。连接（分析仪）；
分析仪连接（audioCtx.目的地）；
console.log（“你好”）；
Analyzer.fftSize=256；
var bufferLength=分析仪频率BINCOUNT；
console.log（缓冲区长度）；
var DATARRAY=新的Uint8Array（缓冲区长度）；
log（“你好”）；
函数绘图（）{
canvasCtx.clearRect（0，0，canvas.width，canvas.height）；
分析仪。GetByTefFrequencyData（数据阵列）；
canvasCtx.fillStyle='rgb（0,0,0）'；
canvasCtx.fillRect（0，0，canvas.width，canvas.height）；
var barWidth=（canvas.width/bufferLength）*2.5；
高度；
var x=0；
对于（变量i=0；i


'''
有没有办法让它在chrome中工作？到目前为止，它的2020 web audio api应该已经平滑了。
Chrome要求由于用户事件，必须仅从代码运行创建AudioContext
s。您可以通过将代码包装在click
事件处理程序或类似程序中来解决此问题

音乐台
开始
document.getElementById（“开始btn”）.addEventListener（“单击”，（）=>{
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
设audioCtx=newaudiocontext（）；
var music=document.getElementById（“播放器”）；
var canvas=document.getElementById（“soundCanv”）；
var canvasCtx=canvas.getContext（“2d”）；
var myAudio=document.querySelector（'audio'）；
var Analyzer=audioCtx.createAnalyzer（）；
//var source=audioCtx.createMediaStreamSource（music.captureStream（））；
var source=audioCtx.createMediaElementSource（myAudio）；
源。连接（分析仪）；
分析仪连接（audioCtx.目的地）；
console.log（“你好”）；
Analyzer.fftSize=256；
var bufferLength=分析仪频率BINCOUNT；
console.log（缓冲区长度）；
var DATARRAY=新的Uint8Array（缓冲区长度）；
log（“你好”）；
函数绘图（）{
canvasCtx.clearRect（0，0，canvas.width，canvas.height）；
分析仪。GetByTefFrequencyData（数据阵列）；
canvasCtx.fillStyle='rgb（0,0,0）'；
canvasCtx.fillRect（0，0，canvas.width，canvas.height）；
var barWidth=（canvas.width/bufferLength）*2.5；
高度；
var x=0；
对于（变量i=0；i
favicon.ico

错误与此无关。好的，这也会显示MusicLayer.html:21音频上下文不允许启动。必须在页面上的用户手势后恢复（或创建）。这将显示在控制台日志的顶部。这是否需要鼠标事件，或者只使用带有布尔值“music.play”的if语句是否有效？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Music Station</title>
    
    <script src="http://cwilso.github.io/AudioContext-MonkeyPatch/AudioContextMonkeyPatch.js"></script>
</head>
<body>
  <audio id="player" controls>
       <source src="Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3">
   </audio>
  
   <canvas width="500px" height="400px" background-color="#000000" id="soundCanv"></canvas>
   
   
   
    <script>
        
        window.AudioContext = window.AudioContext||window.webkitAudioContext;
        let audioCtx = new AudioContext();
      var music=document.getElementById("player");  
     var canvas=document.getElementById("soundCanv");
        var canvasCtx=canvas.getContext("2d");
        var myAudio=document.querySelector('audio');
        
        
var analyser = audioCtx.createAnalyser(); 
//    var source = audioCtx.createMediaStreamSource(music.captureStream());
            var source=audioCtx.createMediaElementSource(myAudio);
source.connect(analyser);
        analyser.connect(audioCtx.destination);

console.log("Hello");
    
    
    analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

console.log("Hello There");
    
        function draw() {
            
      canvasCtx.clearRect(0, 0,canvas.width, canvas.height);

      analyser.getByteFrequencyData(dataArray);

      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
            
            var barWidth = (canvas.width / bufferLength) * 2.5;
var barHeight;
var x = 0;
            
                  for(var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i]/2;

        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
        canvasCtx.fillRect(x,canvas.height-barHeight/2,barWidth,barHeight);

        x += barWidth + 1;
      }
        window.requestAnimationFrame(draw);    
    };
        window.requestAnimationFrame(draw);
        draw();
    
    
    </script>
</body>
</html>