Dieses Mal zeige ich Ihnen, wie Sie mit H5s Canvas ein Musikringspektrogramm zeichnen Fall. Werfen wir einen Blick darauf.
Viele unserer Freunde bei Station B haben das Video gesehen, in dem der Visual Music Player von AE zum Abspielen von Musik verwendet wird. Es sieht sehr cool und aufregend aus.
Heute werde ich Canvas verwenden, um ein einfaches Ringspektrogramm zu erstellen.
Dann~ ヾ(ｏ･ω･)ﾉ Fangen wir an!
1. Zeichnen Sie zunächst den Effekt des
statischenDas Zeichnen des statischen Effekts ist sehr einfach und zeichnen Sie Linien aus einem bestimmten Winkel. Zeichnen Sie dann einen Kreis, um die Linie ab der Mitte abzudecken.
2. Rufen Sie AudioAPI auf, um das Spektrogramm der Musik zu zeichnen.
<canvas id="wrap" height="800" width="800"></canvas><script>
var wrap = document.getElementById("wrap"); var cxt = wrap.getContext("2d");
(function drawSpectrum() {
cxt.clearRect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < 360; i++) { var value = 8;
cxt.beginPath();
cxt.lineWidth = 2;
cxt.moveTo(300, 300); //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginPath();
cxt.lineWidth = 1;
cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
cxt.fillStyle = "#fff";
cxt.stroke();
cxt.fill();
})();</script>Zeichnen Sie das Spektrogramm von die Musik
Schritt 1 Sobald Sie fertig sind, ist der zweite Schritt sehr einfach. Ändern Sie die Zeilenlänge, indem Sie die AudioAPI aufrufen, um die
Audio-Änderungen zu erhalten. Achtung! ! ! Der neueste Chrome-Browser muss möglicherweise auf einem http-Server ausgeführt werden~
Sie können sich auf den Artikel beziehen, um das Spektrogramm von Musik zu zeichnen (mithilfe des Analysator-Knotens)
3 und rechte Darstellung des Rings<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="800" width="800"></canvas><script>
var wrap = document.getElementById("wrap"); var cxt = wrap.getContext("2d"); //获取API
var AudioContext = AudioContext || webkitAudioContext; var context = new AudioContext; //加载媒体
var audio = new Audio("demo.mp3"); //创建节点
var source = context.createMediaElementSource(audio); var analyser = context.createAnalyser(); //连接：source → analyser → destination
source.connect(analyser);
analyser.connect(context.destination); //创建数据
var output = new Uint8Array(360);
(function drawSpectrum() {
analyser.getByteFrequencyData(output);//获取频域数据
cxt.clearRect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < 360; i++) { var value = output[i] / 8;//<===获取数据
cxt.beginPath();
cxt.lineWidth = 2;
cxt.moveTo(300, 300); //R * cos (PI/180*一次旋转的角度数) ,-R * sin (PI/180*一次旋转的角度数)
cxt.lineTo(Math.cos((i * 1) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 1) / 180 * Math.PI) * (200 + value) + 300));
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginPath();
cxt.lineWidth = 1;
cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
cxt.fillStyle = "#fff";
cxt.stroke();
cxt.fill(); //请求下一帧
requestAnimationFrame(drawSpectrum);
})();</script>Nachdem Sie Schritt 2 geübt haben, sind Sie tatsächlich mehr als zur Hälfte fertig, aber vorsichtige Freunde werden feststellen, dass es zwischen den Linien am äußersten rechten Endpunkt des Rings einen großen Unterschied gibt.
Es gibt viele Möglichkeiten, damit umzugehen. Eine der einfachen Möglichkeiten, damit umzugehen, besteht darin, es symmetrisch anzuzeigen.
4. Fügen Sie ein Wellenformdiagramm hinzu<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script>
var wrap = document.getElementById("wrap"); var cxt = wrap.getContext("2d"); //获取API
var AudioContext = AudioContext || webkitAudioContext; var context = new AudioContext; //加载媒体
var audio = new Audio("demo.mp3"); //创建节点
var source = context.createMediaElementSource(audio); var analyser = context.createAnalyser(); //连接：source → analyser → destination
source.connect(analyser);
analyser.connect(context.destination); //创建数据
var output = new Uint8Array(361);
(function drawSpectrum() {
analyser.getByteFrequencyData(output);//获取频域数据
cxt.clearRect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < output.length; i++) { var value = output[i] / 10; //绘制左半边
cxt.beginPath();
cxt.lineWidth = 1;
cxt.moveTo(300, 300);
cxt.lineTo(Math.cos((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i *0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));
cxt.stroke(); //绘制右半边
cxt.beginPath();
cxt.lineWidth = 1;
cxt.moveTo(300, 300);
cxt.lineTo( (Math.sin((i *0.5) / 180 * Math.PI) * (200 + value) + 300),-Math.cos((i *0.5) / 180 * Math.PI) * (200 + value) + 300);
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginPath();
cxt.lineWidth = 1;
cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
cxt.fillStyle = "#fff";
cxt.stroke();
cxt.fill(); //请求下一帧
requestAnimationFrame(drawSpectrum);
})();</script>Lassen Sie uns abschließend versuchen, ein Wellenformdiagramm im Kreis hinzuzufügen
Sie können sich auf den Artikel beziehen, um das Wellenformdiagramm zu zeichnen Musik (mithilfe des Analyseknotens)
Beispiel
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!<input type="button" onclick="audio.play()" value="播放" /><input type="button" onclick="audio.pause()" value="暂停" /><canvas id="wrap" height="550" width="800"></canvas><script>
var wrap = document.getElementById("wrap"); var cxt = wrap.getContext("2d"); //获取API
var AudioContext = AudioContext || webkitAudioContext; var context = new AudioContext; //加载媒体
var audio = new Audio("demo.mp3"); //创建节点
var source = context.createMediaElementSource(audio); var analyser = context.createAnalyser(); //连接：source → analyser → destination
source.connect(analyser);
analyser.connect(context.destination); //创建数据
var output = new Uint8Array(361); //计算出采样频率44100所需的缓冲区长度
var length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0; //创建数据
var output2 = new Uint8Array(length);
(function drawSpectrum() {
analyser.getByteFrequencyData(output);//获取频域数据
cxt.clearRect(0, 0, wrap.width, wrap.height); //画线条
for (var i = 0; i < output.length; i++) { var value = output[i] / 10; //绘制左半边
cxt.beginPath();
cxt.lineWidth = 1;
cxt.moveTo(300, 300);
cxt.lineTo(Math.cos((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300, (- Math.sin((i * 0.5 + 90) / 180 * Math.PI) * (200 + value) + 300));
cxt.stroke(); //绘制右半边
cxt.beginPath();
cxt.lineWidth = 1;
cxt.moveTo(300, 300);
cxt.lineTo((Math.sin((i * 0.5) / 180 * Math.PI) * (200 + value) + 300), -Math.cos((i * 0.5) / 180 * Math.PI) * (200 + value) + 300);
cxt.stroke();
} //画一个小圆，将线条覆盖
cxt.beginPath();
cxt.lineWidth = 1;
cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
cxt.fillStyle = "#fff";
cxt.stroke();
cxt.fill(); //将缓冲区的数据绘制到Canvas上
analyser.getByteTimeDomainData(output2); var height = 100, width = 400;
cxt.beginPath(); for (var i = 0; i < width; i++) {
cxt.lineTo(i + 100, 300 - (height / 2 * (output2[output2.length * i / width | 0] / 256 - 0.5)));
}
cxt.stroke(); //请求下一帧
requestAnimationFrame(drawSpectrum);
})();</script>Verwandte Lektüre:
Wie man aus Leinwand ein nützliches Graffiti-Zeichenbrett machtWie man s-xlsx verwendet um den Import und Export von Excel-Dateien zu implementieren (Teil 2)Das obige ist der detaillierte Inhalt vonSo zeichnen Sie mit H5s Canvas ein kreisförmiges Musikspektrogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
So lösen Sie das Problem des vs2008-Installationsfehlers
Was ist LAN?
So erhalten Sie Daten in HTML
Die Rolle von index.html
Lösung für das Problem, dass die Win10-Download-Software nicht installiert werden kann
Auf welche Tasten beziehen sich Pfeile in Computern?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
