music player test 2

In this example below you will see how to do a music player test 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jason_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jason_ ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>music player test 2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <input type="file" id="file" multiple ><!--<button id="select">select</button>
 <input type="file" id="file" multiple webkitdirectory ><button id="select">select</button>

<div id="player">
  <button id="play">play</button>
  <button id="stop">stop</button>

</div>-->

<div id="analyzer">
 
  <canvas id="display" width="1001" height="801" />
          
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Jason_/music-player-test-2-zzrBVY */
#display {
  border:solid 1px #fff;
}

#analyzer {
  background:#335;
}

/*Downloaded from https://www.codeseek.co/Jason_/music-player-test-2-zzrBVY */
const file = document.getElementById('file')
const selectButton = document.getElementById('select')
//const player = document.getElementById('player')
//const playButton = document.getElementById('play')
//const stopButton = document.getElementById('stop')
const display = document.getElementById('display') 


file.addEventListener('change', handleFileCLick, false)
//playButton.addEventListener('click', play, false)
//stopButton.addEventListener('click', stop, false)

const audioObject = {
  audioContext: new AudioContext(), 
  audioSources: []
}

const diplsayContext = display.getContext('2d')

function handleFileCLick(evemt) {
  
  const localFile = file.files[0]
 
  console.log(file.files)
  
  const reader = new FileReader()
  reader.onload = setUpAudioSrc(audioObject.audioContext, reader)
  reader.readAsArrayBuffer(localFile) ``
 
}

function setUpAudioSrc(audioContext, reader) {
  const audioBuffer = setUpAudioBuffer(audioContext)
  return function(event) {
    audioObject.audioContext.src = event.target.result
    audioBuffer(reader)
    
  }
}

function setUpAudioBuffer(audioContext) {
  return function(reader) {

    audioContext.decodeAudioData(reader.result).then(buffer=>{
      audioObject.audioSources.push(audioContext.createBufferSource())
      audioObject.audioSources[0].buffer = buffer
      //audioObject.audioSources[0].connect(audioContext.destination)
      audioObject.audioSources[0].loop = true
      
      audioObject.analyzer = audioObject.audioContext.createAnalyser()
      audioObject.audioSources[0].connect(audioObject.analyzer)
      audioObject.analyzer.connect(audioContext.destination)
      play()
    })
  }
  
}

function play() {
  
  animateAnalyzer()
  
  audioObject.audioSources[0].start(0)

}

function stop() {
  audioSources[0].stop(0)

}

function animateAnalyzer() {
  
  const frequencyBinCount = new Uint8Array(audioObject.analyzer.frequencyBinCount)
  
  audioObject.analyzer.getByteFrequencyData(frequencyBinCount)
  
  diplsayContext.clearRect(0,0, display.width, display.height) 
  
  const bars = 360
  
  const gradient = diplsayContext.createLinearGradient(0, 0, 0, display.height)
  gradient.addColorStop(0, '#bbe')
  gradient.addColorStop(1, '#335')
  diplsayContext.fillStyle = gradient
  
  const circleCenter = {
    x: 501,
    y: 451, 
    r: 100
  }
  
  for (let i=0; i < bars; i+=1) {
   
    const width = 1  
    const height = -(frequencyBinCount[i]*.3)
   
    const x = circleCenter.x + ((circleCenter.r + frequencyBinCount[360]*.1) * Math.cos(2 * Math.PI * (i-90) / bars))
    const y = circleCenter.y + ((circleCenter.r + frequencyBinCount[360]*.1) * Math.sin(2 * Math.PI * (i-90) / bars))
    diplsayContext.translate(x-200, y-200) 
    
    diplsayContext.rotate((i-180)*Math.PI/180)
   
    diplsayContext.fillRect(0,0, width, -height*.5)
    diplsayContext.setTransform(1, 0, 0, 1, 0, 0)
  }
  
  
  window.requestAnimationFrame(animateAnalyzer)
}

Comments