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
- 离问题结束还有 161天1小时57分6秒
点赞 0反对 0举报 0
收藏 0
分享 0
