极客观点
项目管理
HarmonyOS
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>
html5