From d7724bc75ce3771c346a17592c6d83752764f394 Mon Sep 17 00:00:00 2001 From: Meekdai Date: Thu, 19 Oct 2023 18:02:18 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=BF=87draw=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E7=BB=98=E5=88=B6=E9=9F=B3=E9=A2=91=E5=8F=AF=E8=A7=86=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E5=A4=AA=E5=8D=A0GPU=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/index.html | 10 ++-- docs/player.js | 122 +++++++++++++++++++++++++++++++++++------------- docs/styles.css | 9 +--- 3 files changed, 98 insertions(+), 43 deletions(-) diff --git a/docs/index.html b/docs/index.html index c1b6075..fb34f92 100644 --- a/docs/index.html +++ b/docs/index.html @@ -29,8 +29,8 @@ -
-
+
+
@@ -60,13 +60,15 @@ + - - + + + diff --git a/docs/player.js b/docs/player.js index a814859..786cc13 100644 --- a/docs/player.js +++ b/docs/player.js @@ -5,6 +5,7 @@ elms.forEach(function(elm) { window[elm] = document.getElementById(elm); }); + /** * Player class containing the state of our playlist and where we are in it. * Includes all methods for playing, skipping, updating the display, etc. @@ -50,7 +51,7 @@ Player.prototype = { } else { sound = data.howl = new Howl({ src: [media + data.mp3], - html5: true, // Force to HTML5 so that the audio can stream in (best for large files). + // html5: true, // Force to HTML5 so that the audio can stream in (best for large files). onplay: function() { // Display the duration. duration.innerHTML = self.formatTime(Math.round(sound.duration())); @@ -59,31 +60,31 @@ Player.prototype = { requestAnimationFrame(self.step.bind(self)); // Start the wave animation if we have already loaded - wave.container.style.display = 'block'; - bar.style.display = 'none'; + // wave.container.style.display = 'block'; + // bar.style.display = 'none'; pauseBtn.style.display = 'block'; }, onload: function() { // Start the wave animation. - wave.container.style.display = 'block'; - bar.style.display = 'none'; + // wave.container.style.display = 'block'; + // bar.style.display = 'none'; loading.style.display = 'none'; }, onend: function() { // Stop the wave animation. - wave.container.style.display = 'none'; - bar.style.display = 'block'; + // wave.container.style.display = 'none'; + // bar.style.display = 'block'; self.skip('next'); }, onpause: function() { // Stop the wave animation. - wave.container.style.display = 'none'; - bar.style.display = 'block'; + // wave.container.style.display = 'none'; + // bar.style.display = 'block'; }, onstop: function() { // Stop the wave animation. - wave.container.style.display = 'none'; - bar.style.display = 'block'; + // wave.container.style.display = 'none'; + // bar.style.display = 'block'; }, onseek: function() { // Start updating the progress of the track. @@ -106,6 +107,16 @@ Player.prototype = { document.querySelector('#list-song-'+index).style.backgroundColor='rgba(255, 255, 255, 0.1)';//高亮当前播放 playNum=index; + this.analyser=Howler.ctx.createAnalyser(); + this.analyser.fftSize = 256; + this.bufferLength = this.analyser.frequencyBinCount; + this.dataArray = new Uint8Array(this.bufferLength); + Howler.masterGain.connect(this.analyser); + + //之后通过如下指令就可获取 + // player.analyser.getByteFrequencyData(player.dataArray); + // player.analyser.getByteTimeDomainData(player.dataArray); + // Show the pause button. if (sound.state() === 'loaded') { playBtn.style.display = 'none'; @@ -364,31 +375,31 @@ volume.addEventListener('mousemove', move); volume.addEventListener('touchmove', move); // Setup the "waveform" animation. -var wave = new SiriWave({ - container: waveform, - width: window.innerWidth, - height: window.innerHeight * 0.3, - cover: true, - speed: 0.03, - amplitude: 0.7, - frequency: 2 -}); -wave.start(); +// var wave = new SiriWave({ +// container: waveform, +// width: window.innerWidth, +// height: window.innerHeight * 0.3, +// cover: true, +// speed: 0.03, +// amplitude: 0.7, +// frequency: 2 +// }); +// wave.start(); // Update the height of the wave animation. // These are basically some hacks to get SiriWave.js to do what we want. var resize = function() { - var height = window.innerHeight * 0.3; - var width = window.innerWidth; - wave.height = height; - wave.height_2 = height / 2; - wave.MAX = wave.height_2 - 4; - wave.width = width; - wave.width_2 = width / 2; - wave.width_4 = width / 4; - wave.canvas.height = height; - wave.canvas.width = width; - wave.container.style.margin = -(height / 2) + 'px auto'; + // var height = window.innerHeight * 0.3; + // var width = window.innerWidth; + // wave.height = height; + // wave.height_2 = height / 2; + // wave.MAX = wave.height_2 - 4; + // wave.width = width; + // wave.width_2 = width / 2; + // wave.width_4 = width / 4; + // wave.canvas.height = height; + // wave.canvas.width = width; + // wave.container.style.margin = -(height / 2) + 'px auto'; // Update the position of the slider. // var sound = player.playlist[player.index].howl; @@ -401,3 +412,50 @@ var resize = function() { }; window.addEventListener('resize', resize); resize(); + + + + + +function draw() { + let HEIGHT = window.innerHeight * 0.3; + let WIDTH = window.innerWidth; + + let c=document.getElementById("myCanvas"); + var canvasCtx=c.getContext("2d"); + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + + drawVisual = requestAnimationFrame(draw); + + player.analyser.getByteFrequencyData(player.dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / player.bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < player.bufferLength; i++) { + barHeight = player.dataArray[i] / 2; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight); + + x += barWidth + 1; + } +} + +draw() + +// Create an analyser node in the Howler WebAudio context +// let analyser = Howler.ctx.createAnalyser(); +// Connect the masterGain -> analyser (disconnecting masterGain -> destination) +// Howler.masterGain.connect(analyser); + +// Howler.masterGain.disconnect(); +// level = Howler.ctx.createGain(); +// Howler.masterGain.connect(level); +// level.gain.setValueAtTime(levelValue, Howler.ctx.currentTime); +// level.connect(Howler.ctx.destination); + diff --git a/docs/styles.css b/docs/styles.css index 55b51b2..2fb9cc2 100644 --- a/docs/styles.css +++ b/docs/styles.css @@ -13,16 +13,11 @@ body { padding: 0; margin: 0; overflow: hidden; - background: #bb71f3; - background: -moz-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%); - background: -webkit-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%); - background: linear-gradient(135deg, #bb71f3 0%, #3d4d91 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb71f3', endColorstr='#3d4d91', GradientType=1); font-family: "Helvetica Neue", "Futura", "Trebuchet MS", Arial; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - /* background:center center fixed no-repeat; */ + background:center center fixed no-repeat #ededed; background-size:cover; } @@ -145,7 +140,7 @@ body { left: 0; top: 50%; margin: -15% auto; - display: none; + /* display: none; */ cursor: pointer; opacity: 0.8; -webkit-user-select: none;