html网页播放音乐时没声音且报错The AudioContext was not allowed to start. It must be resumed (or created) a

Question

浏览器播放音乐时没有声音，而且报错：

html代码：

//播放按钮                
<a href="#" id="play" class="music_play" title="播放">

<audio src="music/1.mp3" id="music_mp3">

js代码：

//暂停和播放
play.click(function(){
    if(flag){
        musicOBJ.pause();//暂停歌曲
        musicStop();
        img.removeClass("img_rotate");//歌曲图片停止旋转
        play.removeClass("music_pause").addClass("music_play");//暂停按钮变为播放按钮
        flag=false;//修改歌曲是否播放标记
    }else{
        musicStop();
        musicOBJ.play();//播放歌曲
        musicTime();
        img.addClass("img_rotate");//歌曲图片开始旋转
        play.removeClass("music_play").addClass("music_pause");//播放按钮变为暂停按钮
        flag=true;//修改歌曲是否播放标记
    }
})

/*
    音频可视化
*/
var wrap = document.getElementById("canvas");
var cxt = wrap.getContext("2d");
//获取API    
var AudioContext = AudioContext || webkitAudioContext;    
var context = new AudioContext;
 //加载媒体    
 let audioArray = [
    '../music/1.mp3',
    '../music/2.mp3',
    '../music/3.mp3',
    '../music/4.mp3',
];
let audioNum = 0;
let oAudio = document.getElementById('music_mp3');
oAudio.crossOrigin = 'anonymous';
oAudio.src = audioArray[audioNum];
 //创建节点    
 var source = context.createMediaElementSource(oAudio);    
 var analyser = context.createAnalyser();
 //连接：source → analyser → destination    
 source.connect(analyser);    
 analyser.connect(context.destination); 
   //创建数据  
 var output = new Uint8Array(180);
   //  计算画布的宽度    
   width = wrap.offsetWidth,    
   //  计算画布的高度    
   height = wrap.offsetHeight,      
   //  设置宽高    
   canvas.width = width;    
   canvas.height = height;  
 //角度  
 var du = 2;
 //起始坐标    
 var potInt = { x: wrap.height/2, y: wrap.width/2 };
 //半径 
 var R = 300;
 //宽 
 var W = 10; 
 //计算出采样频率44100所需的缓冲区长度    
 var length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;   
  //创建数据    
  var output2 = new Uint8Array(length); 
  var gradient=cxt.createLinearGradient(0,0,250,800);
gradient.addColorStop("0","#6F00D2");
gradient.addColorStop("0.7","#921AFF");
gradient.addColorStop("1.0","#1818ff"); 
(function drawSpectrum() {  
    cxt.shadowOffsetX=-3;
    cxt.shadowOffsetY=-3;
    cxt.shadowColor='white';
    cxt.shadowBlur=100;   
    analyser.getByteFrequencyData(output);
    //获取频域数据          
    cxt.clearRect(0, 0, wrap.width, wrap.height);
            //画线条        
    for (var i = 0; i < 180; i++) {  
        var value = output[i] / 2;//<===获取数据        
        cxt.beginPath();            
        cxt.lineWidth = W;
        Rv1 = (R -value);
        Rv2 = (R +value);
        //从圆边开始            
        cxt.moveTo(( Math.sin((i * du) / 180 * Math.PI) * Rv1 + potInt.y),-Math.cos((i * du) / 180 * Math.PI) * Rv1 + potInt.x);             
        //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)            
        cxt.lineTo((Math.sin((i * du) / 180 * Math.PI) * Rv2 + potInt.y), - Math.cos((i * du) / 180 * Math.PI) * Rv2 + potInt.x);
        cxt.stroke(); 
        cxt.strokeStyle = gradient;
    }              
    //请求下一帧        
    requestAnimationFrame(drawSpectrum);     
})();

Answer 1

chatgpt:
该错误通常表示浏览器正在阻止自动播放音频，需要用户的明确许可才能继续播放。以下是几种可能的解决方法：

添加用户交互事件：在网页中，播放音乐前最好添加用户交互事件，例如在播放按钮上添加点击事件或添加页面的加载事件。当用户首次与页面交互时，浏览器会允许自动播放音频。
确保浏览器版本支持：一些旧版本的浏览器可能不支持HTML5音频播放功能。确保您的浏览器是最新版本，并且支持HTML5音频标签。
确认音频文件路径：确保音频文件的路径是正确的，而且文件本身也存在。可以尝试使用绝对路径或相对路径指定音频文件的位置。
确保其他应用程序没有占用音频设备：如果其他应用程序正在使用音频设备，可能会导致播放音频时出现问题。尝试关闭其他应用程序或者重新启动计算机，以确保音频设备可用。
检查浏览器设置：有些浏览器可能默认禁止自动播放音频。在浏览器设置中，可以尝试将自动播放音频的选项设置为允许，以解决此问题。
确认浏览器支持Web Audio API：如果使用Web Audio API来播放音频，需要确保浏览器支持该API。可以在浏览器的开发者文档中查看Web Audio API的支持情况。