Created
November 8, 2019 19:55
-
-
Save eliziebluiz/c82e5c995feddc3adc54512851841c61 to your computer and use it in GitHub Desktop.
Rádio Multimidia // source https://jsbin.com/lukacuf
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Rádio Multimidia</title> | |
| <link rel="icon" href="1.png" type="imagem/gif"> | |
| <link rel="stylesheet" href="style.css"></link> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <style id="jsbin-css"> | |
| body{ | |
| background-image: url(12.jpg); | |
| background-repeat: no-repeat; | |
| background-attachment: fixed; | |
| background-size: 100% 100%; | |
| } | |
| p{ | |
| color: white; | |
| } | |
| b{ | |
| color: white; | |
| } | |
| h3{ | |
| color: white; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color: white; | |
| } | |
| ul{ | |
| list-style-type: none; | |
| } | |
| #cantores{ | |
| height: 130px; | |
| width: 130px; | |
| } | |
| #audio{ | |
| height: 40px; | |
| width: 1290px; | |
| background-color:purple; | |
| } | |
| #playlist{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist1{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist2{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist3{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist4{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist5{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| .slider-wrapper input { | |
| width: 150px; | |
| height: 20px; | |
| margin: 10; | |
| transform-origin: 75px 75px; | |
| } | |
| h4{ | |
| color:white; | |
| } | |
| canvas{ | |
| width:401px; | |
| height:150px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="playlist1"> | |
| <li><a href="felipe.mp3"> | |
| <img id="cantores" src="unnamed.jpg"> | |
| <h4>Sessão do Descarrego</h4> | |
| </a></li> | |
| <li><a href="don.mp3"> | |
| <img id="cantores" src="don.jpg"> | |
| <h4>Na maciota</h4> | |
| </a></li> | |
| <li><a href="jonas.mp3"> | |
| <img id="cantores" src="jonas.jpg"> | |
| <h4>Ta Faltando Eu</h4> | |
| </a></li> | |
| </ul> | |
| <ul id="playlist2"> | |
| <li><a href="matue.mp3"> | |
| <img id="cantores" src="matue.jpg"> | |
| <h4>Kenny g</h4> | |
| </a></li> | |
| <li><a href="xand.mp3"> | |
| <img id="cantores" src="xand.jpg"> | |
| <h4>Como é que faz</h4> | |
| </a></li> | |
| <li><a href="alo2.mp3"> | |
| <img id="cantores" src="alok.jpg"> | |
| <h4>Hear me now</h4> | |
| </a></li> | |
| </ul> | |
| <ul id="playlist3"> | |
| <li><a href="ze.mp3"> | |
| <img id="cantores" src="ze.png"> | |
| <h4>Se você se entregar</h4> | |
| </a></li> | |
| <li><a href="mash.mp3"> | |
| <img id="cantores" src="drop.jpg"> | |
| <h4>Marshmello</h4> | |
| </a></li> | |
| <li><a href="ferrugem.mp3"> | |
| <img id="cantores" src="ferrugem.jpg"> | |
| <h4>Sonho</h4> | |
| </a></li> | |
| </ul> | |
| <ul id="playlist4"> | |
| <li><a href="misa.mp3"> | |
| <img id="cantores" src="misa.jpg"> | |
| <h4>Sem Roteiro</h4> | |
| </a></li> | |
| <li><a href="hungria.mp3"> | |
| <img id="cantores" src="hungria.jpg"> | |
| <h4>Beijo com Trap</h4> | |
| </a></li> | |
| <li><a href="Negrodrama.mp3"> | |
| <img id="cantores" src="negodrama.png"> | |
| <h4>Nego Drama</h4> | |
| </a></li> | |
| </ul> | |
| <ul id="playlist5"> | |
| <li><a href="gd.mp3"> | |
| <img id="cantores" src="gd.jpg"> | |
| <h4>Festinha lá em casa</h4> | |
| </a></li> | |
| <li><a href="pixote.mp3"> | |
| <img id="cantores" src="pixote.jpg"> | |
| <h4>Saudade Arregaça</h4> | |
| </a></li> | |
| <li><a href="alok1.mp3"> | |
| <img id="cantores" src="fuego.jpg"> | |
| <h4>Fuego</h4> | |
| </a></li> | |
| </ul> | |
| <h4>Onda</h4> | |
| <canvas id="canvas"></canvas> | |
| <h4>Frequência</h4> | |
| <canvas id ="canvas2"></canvas> | |
| <p>Volume:</p> | |
| <div class="slider-wrapper"> | |
| <input id="volume" type="range" min="0" max="1" value="7" step="0.001"/> | |
| </div> | |
| <p>Balanço:</p> | |
| <input id="balanco" type="range" min="-1" max="1" step="0.001" value="0"/> | |
| <audio id="audio" controls="controls" autoplay> | |
| <source src="felipe.mp3"> | |
| </source> | |
| </audio> | |
| <script type = "text/javascript" src ="index.js"></script> | |
| <script id="jsbin-javascript"> | |
| inicio1(); | |
| inicio2(); | |
| inicio3(); | |
| inicio4(); | |
| inicio5(); | |
| var canvas; | |
| var canvas2; | |
| var canvasContext; | |
| var canvasContext2; | |
| var width; | |
| var height; | |
| var width2; | |
| var height2; | |
| var analyser; | |
| var analyser2; | |
| var bufferLength; | |
| var dataArray; | |
| var dataArray2; | |
| window.onload = function(){ | |
| var context = AudioContext || webkitAudioContext; | |
| var audioContext = new context(); | |
| var audio = document.querySelector("#audio"); | |
| audio.onplay=(e)=>{audioContext.resume();} | |
| canvas = document.querySelector("#canvas"); | |
| canvasContext = canvas.getContext("2d"); | |
| canvas2 = document.querySelector("#canvas2"); | |
| canvasContext2 = canvas2.getContext("2d"); | |
| width = canvas.width; | |
| height = canvas.height; | |
| width2 = canvas2.width; | |
| height2 = canvas2.height; | |
| var volume = document.querySelector("#volume"); | |
| var balanco = document.querySelector("#balanco"); | |
| var media = audioContext.createMediaElementSource(audio); | |
| var audioControle = audioContext.createGain(); | |
| var balancoControle = audioContext.createStereoPanner(); | |
| analyser = audioContext.createAnalyser(); | |
| analyser.fftSize = 1024; | |
| bufferLength = analyser.frequencyBinCount; | |
| dataArray = new Uint8Array(bufferLength); | |
| analyser2 = audioContext.createAnalyser(); | |
| analyser2.fftSize = 1024; | |
| bufferLength = analyser2.frequencyBinCount; | |
| dataArray2 = new Uint8Array(bufferLength); | |
| media.connect(audioControle); | |
| audioControle.connect(analyser2); | |
| analyser2.connect(analyser); | |
| analyser.connect(balancoControle); | |
| balancoControle.connect(audioContext.destination); | |
| volume.oninput=function(e){ | |
| audioControle.gain.value=e.target.value; | |
| } | |
| balanco.oninput=function(e){ | |
| balancoControle.pan.value=e.target.value; | |
| } | |
| requestAnimationFrame(visualize); | |
| requestAnimationFrame(visualize2); | |
| } | |
| function visualize(){ | |
| canvasContext.fillStyle = "black"; | |
| canvasContext.fillRect(0,0,width,height); | |
| analyser.getByteTimeDomainData(dataArray); | |
| canvasContext.lineWidth = 1; | |
| canvasContext.strokeStyle = "purple" | |
| canvasContext.beginPath(); | |
| var sliceWidth = width / bufferLength; | |
| var x = 0; | |
| for(var i = 0; i < bufferLength; i++){ | |
| var v = dataArray[i]/255; | |
| var y = v * height; | |
| if(i === 0){ | |
| canvasContext.moveTo(x,y); | |
| }else{ | |
| canvasContext.lineTo(x,y); | |
| } | |
| x += sliceWidth; | |
| } | |
| canvasContext.stroke(); | |
| requestAnimationFrame(visualize); | |
| ;} | |
| function visualize2(){ | |
| canvasContext2.fillStyle = "black"; | |
| var height2 = canvas2.height; | |
| var width2 = canvas2.width; | |
| canvasContext2.fillRect(0,0,width2,height2); | |
| analyser2.getByteFrequencyData(dataArray2); | |
| var x = 0; | |
| var barWidth = width2 / bufferLength; | |
| for(var i = 0; i < bufferLength; i++){ | |
| var v = dataArray2[i]/255; | |
| var y = v * (height/2); | |
| canvasContext2.fillStyle="purple"; | |
| canvasContext2.fillRect(x,height2/2,barWidth,-y); | |
| canvasContext2.fillRect(x,height2/2,barWidth,y); | |
| x+=barWidth + 2; | |
| } | |
| requestAnimationFrame(visualize2); | |
| } | |
| //Playlist1 | |
| function inicio1(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist1"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist2 | |
| function inicio2(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist2"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist3 | |
| function inicio3(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist3"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist4 | |
| function inicio4(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist4"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist5 | |
| function inicio5(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist5"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| function exe(link, player){ | |
| player.src=link.attr("href"); | |
| par=link.parent(); | |
| par.addClass("active").siblings.removeClasss("active"); | |
| player.load(); | |
| player.play(); | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body{ | |
| background-image: url(12.jpg); | |
| background-repeat: no-repeat; | |
| background-attachment: fixed; | |
| background-size: 100% 100%; | |
| } | |
| p{ | |
| color: white; | |
| } | |
| b{ | |
| color: white; | |
| } | |
| h3{ | |
| color: white; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color: white; | |
| } | |
| ul{ | |
| list-style-type: none; | |
| } | |
| #cantores{ | |
| height: 130px; | |
| width: 130px; | |
| } | |
| #audio{ | |
| height: 40px; | |
| width: 1290px; | |
| background-color:purple; | |
| } | |
| #playlist{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist1{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist2{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist3{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist4{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist5{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| .slider-wrapper input { | |
| width: 150px; | |
| height: 20px; | |
| margin: 10; | |
| transform-origin: 75px 75px; | |
| } | |
| h4{ | |
| color:white; | |
| } | |
| canvas{ | |
| width:401px; | |
| height:150px; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">inicio1(); | |
| inicio2(); | |
| inicio3(); | |
| inicio4(); | |
| inicio5(); | |
| var canvas; | |
| var canvas2; | |
| var canvasContext; | |
| var canvasContext2; | |
| var width; | |
| var height; | |
| var width2; | |
| var height2; | |
| var analyser; | |
| var analyser2; | |
| var bufferLength; | |
| var dataArray; | |
| var dataArray2; | |
| window.onload = function(){ | |
| var context = AudioContext || webkitAudioContext; | |
| var audioContext = new context(); | |
| var audio = document.querySelector("#audio"); | |
| audio.onplay=(e)=>{audioContext.resume();} | |
| canvas = document.querySelector("#canvas"); | |
| canvasContext = canvas.getContext("2d"); | |
| canvas2 = document.querySelector("#canvas2"); | |
| canvasContext2 = canvas2.getContext("2d"); | |
| width = canvas.width; | |
| height = canvas.height; | |
| width2 = canvas2.width; | |
| height2 = canvas2.height; | |
| var volume = document.querySelector("#volume"); | |
| var balanco = document.querySelector("#balanco"); | |
| var media = audioContext.createMediaElementSource(audio); | |
| var audioControle = audioContext.createGain(); | |
| var balancoControle = audioContext.createStereoPanner(); | |
| analyser = audioContext.createAnalyser(); | |
| analyser.fftSize = 1024; | |
| bufferLength = analyser.frequencyBinCount; | |
| dataArray = new Uint8Array(bufferLength); | |
| analyser2 = audioContext.createAnalyser(); | |
| analyser2.fftSize = 1024; | |
| bufferLength = analyser2.frequencyBinCount; | |
| dataArray2 = new Uint8Array(bufferLength); | |
| media.connect(audioControle); | |
| audioControle.connect(analyser2); | |
| analyser2.connect(analyser); | |
| analyser.connect(balancoControle); | |
| balancoControle.connect(audioContext.destination); | |
| volume.oninput=function(e){ | |
| audioControle.gain.value=e.target.value; | |
| } | |
| balanco.oninput=function(e){ | |
| balancoControle.pan.value=e.target.value; | |
| } | |
| requestAnimationFrame(visualize); | |
| requestAnimationFrame(visualize2); | |
| } | |
| function visualize(){ | |
| canvasContext.fillStyle = "black"; | |
| canvasContext.fillRect(0,0,width,height); | |
| analyser.getByteTimeDomainData(dataArray); | |
| canvasContext.lineWidth = 1; | |
| canvasContext.strokeStyle = "purple" | |
| canvasContext.beginPath(); | |
| var sliceWidth = width / bufferLength; | |
| var x = 0; | |
| for(var i = 0; i < bufferLength; i++){ | |
| var v = dataArray[i]/255; | |
| var y = v * height; | |
| if(i === 0){ | |
| canvasContext.moveTo(x,y); | |
| }else{ | |
| canvasContext.lineTo(x,y); | |
| } | |
| x += sliceWidth; | |
| } | |
| canvasContext.stroke(); | |
| requestAnimationFrame(visualize); | |
| ;} | |
| function visualize2(){ | |
| canvasContext2.fillStyle = "black"; | |
| var height2 = canvas2.height; | |
| var width2 = canvas2.width; | |
| canvasContext2.fillRect(0,0,width2,height2); | |
| analyser2.getByteFrequencyData(dataArray2); | |
| var x = 0; | |
| var barWidth = width2 / bufferLength; | |
| for(var i = 0; i < bufferLength; i++){ | |
| var v = dataArray2[i]/255; | |
| var y = v * (height/2); | |
| canvasContext2.fillStyle="purple"; | |
| canvasContext2.fillRect(x,height2/2,barWidth,-y); | |
| canvasContext2.fillRect(x,height2/2,barWidth,y); | |
| x+=barWidth + 2; | |
| } | |
| requestAnimationFrame(visualize2); | |
| } | |
| //Playlist1 | |
| function inicio1(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist1"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist2 | |
| function inicio2(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist2"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist3 | |
| function inicio3(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist3"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist4 | |
| function inicio4(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist4"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist5 | |
| function inicio5(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist5"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| function exe(link, player){ | |
| player.src=link.attr("href"); | |
| par=link.parent(); | |
| par.addClass("active").siblings.removeClasss("active"); | |
| player.load(); | |
| player.play(); | |
| } | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background-image: url(12.jpg); | |
| background-repeat: no-repeat; | |
| background-attachment: fixed; | |
| background-size: 100% 100%; | |
| } | |
| p{ | |
| color: white; | |
| } | |
| b{ | |
| color: white; | |
| } | |
| h3{ | |
| color: white; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color: white; | |
| } | |
| ul{ | |
| list-style-type: none; | |
| } | |
| #cantores{ | |
| height: 130px; | |
| width: 130px; | |
| } | |
| #audio{ | |
| height: 40px; | |
| width: 1290px; | |
| background-color:purple; | |
| } | |
| #playlist{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist1{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist2{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist3{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist4{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| #playlist5{ | |
| list-style: none; | |
| text-align: center; | |
| float: right; | |
| } | |
| .slider-wrapper input { | |
| width: 150px; | |
| height: 20px; | |
| margin: 10; | |
| transform-origin: 75px 75px; | |
| } | |
| h4{ | |
| color:white; | |
| } | |
| canvas{ | |
| width:401px; | |
| height:150px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| inicio1(); | |
| inicio2(); | |
| inicio3(); | |
| inicio4(); | |
| inicio5(); | |
| var canvas; | |
| var canvas2; | |
| var canvasContext; | |
| var canvasContext2; | |
| var width; | |
| var height; | |
| var width2; | |
| var height2; | |
| var analyser; | |
| var analyser2; | |
| var bufferLength; | |
| var dataArray; | |
| var dataArray2; | |
| window.onload = function(){ | |
| var context = AudioContext || webkitAudioContext; | |
| var audioContext = new context(); | |
| var audio = document.querySelector("#audio"); | |
| audio.onplay=(e)=>{audioContext.resume();} | |
| canvas = document.querySelector("#canvas"); | |
| canvasContext = canvas.getContext("2d"); | |
| canvas2 = document.querySelector("#canvas2"); | |
| canvasContext2 = canvas2.getContext("2d"); | |
| width = canvas.width; | |
| height = canvas.height; | |
| width2 = canvas2.width; | |
| height2 = canvas2.height; | |
| var volume = document.querySelector("#volume"); | |
| var balanco = document.querySelector("#balanco"); | |
| var media = audioContext.createMediaElementSource(audio); | |
| var audioControle = audioContext.createGain(); | |
| var balancoControle = audioContext.createStereoPanner(); | |
| analyser = audioContext.createAnalyser(); | |
| analyser.fftSize = 1024; | |
| bufferLength = analyser.frequencyBinCount; | |
| dataArray = new Uint8Array(bufferLength); | |
| analyser2 = audioContext.createAnalyser(); | |
| analyser2.fftSize = 1024; | |
| bufferLength = analyser2.frequencyBinCount; | |
| dataArray2 = new Uint8Array(bufferLength); | |
| media.connect(audioControle); | |
| audioControle.connect(analyser2); | |
| analyser2.connect(analyser); | |
| analyser.connect(balancoControle); | |
| balancoControle.connect(audioContext.destination); | |
| volume.oninput=function(e){ | |
| audioControle.gain.value=e.target.value; | |
| } | |
| balanco.oninput=function(e){ | |
| balancoControle.pan.value=e.target.value; | |
| } | |
| requestAnimationFrame(visualize); | |
| requestAnimationFrame(visualize2); | |
| } | |
| function visualize(){ | |
| canvasContext.fillStyle = "black"; | |
| canvasContext.fillRect(0,0,width,height); | |
| analyser.getByteTimeDomainData(dataArray); | |
| canvasContext.lineWidth = 1; | |
| canvasContext.strokeStyle = "purple" | |
| canvasContext.beginPath(); | |
| var sliceWidth = width / bufferLength; | |
| var x = 0; | |
| for(var i = 0; i < bufferLength; i++){ | |
| var v = dataArray[i]/255; | |
| var y = v * height; | |
| if(i === 0){ | |
| canvasContext.moveTo(x,y); | |
| }else{ | |
| canvasContext.lineTo(x,y); | |
| } | |
| x += sliceWidth; | |
| } | |
| canvasContext.stroke(); | |
| requestAnimationFrame(visualize); | |
| ;} | |
| function visualize2(){ | |
| canvasContext2.fillStyle = "black"; | |
| var height2 = canvas2.height; | |
| var width2 = canvas2.width; | |
| canvasContext2.fillRect(0,0,width2,height2); | |
| analyser2.getByteFrequencyData(dataArray2); | |
| var x = 0; | |
| var barWidth = width2 / bufferLength; | |
| for(var i = 0; i < bufferLength; i++){ | |
| var v = dataArray2[i]/255; | |
| var y = v * (height/2); | |
| canvasContext2.fillStyle="purple"; | |
| canvasContext2.fillRect(x,height2/2,barWidth,-y); | |
| canvasContext2.fillRect(x,height2/2,barWidth,y); | |
| x+=barWidth + 2; | |
| } | |
| requestAnimationFrame(visualize2); | |
| } | |
| //Playlist1 | |
| function inicio1(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist1"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist2 | |
| function inicio2(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist2"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist3 | |
| function inicio3(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist3"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist4 | |
| function inicio4(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist4"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| //Playlist5 | |
| function inicio5(){ | |
| var corrente = 0; | |
| var audio = $("#audio"); | |
| var playlist = $("#playlist5"); | |
| var tracks= playlist.find("li a"); | |
| var len= tracks.length-1; | |
| audio[0].play(); | |
| playlist.find("a").click(function(e){ | |
| e.preventDefault(); | |
| link = $(this); | |
| corrente = link.parent().index(); | |
| exe(link, audio[0]); | |
| }); | |
| audio[0].addEventListener("ended", function(e){ | |
| corrente++; | |
| if(corrente == len){ | |
| corrente = 0; | |
| link = playlist.find("a")[0]; | |
| }else{ | |
| link = playlist.find("a")[corrente]; | |
| } | |
| exe($(link), audio[0]); | |
| }); | |
| } | |
| function exe(link, player){ | |
| player.src=link.attr("href"); | |
| par=link.parent(); | |
| par.addClass("active").siblings.removeClasss("active"); | |
| player.load(); | |
| player.play(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment