h5 音乐可视化 canvas audio在安卓上没问题ios上不行_前端问题_站长_知道

h5 音乐可视化 canvas audio在安卓上没问题ios上不行

有没有人遇到这个问题，怎么处理的

analyser.getByteFrequencyData(voicehigh);
console.log(voicehigh)

安卓这里有数据
ios上，这里输出的都是0

具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<style type="text/css">
.vbg{width:320px;height:200px;background:#000;margin:50px auto;}
#playm{width:100px;height:100px;background:#c00;margin:50px auto;}
</style>
<title>自己做特效</title>
</head>
<body>
   <div id="playm">播放音乐 </div>
    <div class="vbg"><canvas id="canvas"></canvas></div>
    <audio id="media1" src="m7358427a.mp3" crossOrigin="anonymous" loop="loop"></audio>

  <script>

  
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext
function playmusic() {
    
    var $ = function(id) {
        return document.getElementById(id);
    }
    var canvas = $('canvas');
    var audio = $('media1');

    var ctr = $('ctr');
    var ctx = canvas.getContext('2d');
     actx = new AudioContext();
    
    audio.play()

    canvas.width = 320;
    canvas.height = 200;

    var analyser = actx.createAnalyser();
    var audioSrc = actx.createMediaElementSource(audio);
    audioSrc.connect(analyser);
    analyser.connect(actx.destination);
    var voicehigh = new Uint8Array(analyser.frequencyBinCount);
    var num = 180;
    function draw() {
        
        analyser.getByteFrequencyData(voicehigh);
        //analyser.getByteTimeDomainData(voicehigh);
        console.log(voicehigh)
        
        var step = Math.round(voicehigh.length / num);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.lineWidth = 1 
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        for (var i = 1; i < num; i++) {
            var value = voicehigh[step * i];
            value = value
            moveTo(0, canvas.height);
            ctx.lineTo(i * 10, -value + canvas.height-2);
            ctx.strokeStyle = "#fff";
            ctx.stroke();
        }
        requestAnimationFrame(draw);
    }
    draw();
}
document.getElementById('playm').addEventListener('click',function(){
    playmusic()
})    
</script>

  
</body>
</html>

待解决悬赏分：0 - 离问题结束还有

点赞 0反对 0举报 0 收藏 0

h5 音乐可视化 canvas audio在安卓上没问题ios上不行

回答0