music player test 3

In this example below you will see how to do a music player test 3 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 3</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-3-WOxpWY */
#display {
  border:solid 1px #fff;
}

#analyzer {
  background:#335;
}

/*Downloaded from https://www.codeseek.co/Jason_/music-player-test-3-WOxpWY */
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 = false
      
      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() {
  audioObject.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 = 720
  
  //const gradient = diplsayContext.createLinearGradient(0, 0, 0, display.height)
    
    
   /*  const gradient = diplsayContext.createRadialGradient(301, 151, 250, 301, 151, 0)*/
    //gradient.addColorStop(0, '#bbe')
   // gradient.addColorStop(1, '#335') 
  
   
    diplsayContext.fillStyle = '#bbe' 
  
  const circleCenter = {
    x: 501,
    y: 451,  
    r: 150
  }
  
  for (let i=0; i < bars; i+=1) {
   
    const width = 1  
    const height = -(frequencyBinCount[i]*.6) 
    const x = circleCenter.x + ((circleCenter.r + frequencyBinCount[180]*.1) * Math.cos(2 * Math.PI * (i-180) / bars))
    const y = circleCenter.y + ((circleCenter.r + frequencyBinCount[180]*.1) * Math.sin(2 * Math.PI * (i-180) / bars))
    
 
    diplsayContext.translate(x, y)
    
    
      diplsayContext.rotate(((i/2)-180)*Math.PI/180) 
   
    
    
   
    diplsayContext.fillRect(0,0, width, -height*.5)
    
    diplsayContext.setTransform(1, 0, 0, 1, 0, 0)
  }
  
  console.log(audioObject.audioContext.currentTime)
  window.requestAnimationFrame(animateAnalyzer)
}

Comments