HTML Local Audio Player with visualizer
HTML features, include native audio and video support without the need for Flash.Below code works based HTML,CSS and Java Script.You can drag and drop your local Mp3 files into the container.
Example
Let’s look at the following example, where we are going to create a local audio visualizerHTML File
<!DOCTYPE html><html><style>
#instructions {
width: 100%;
text-align: center;
top: 50%;
margin-top: -100px;
color: #DE3163;
}
#container {
position: absolute;
width: 100%;
height: 100%;
background: #D5F5E3;
}
#canvas-container {
width: 600px;
height: 600px;
margin: auto;
position: relative;
top: 50%;
margin-top: -263px;
margin-right: -61px;
}
#canvas-copy {
opacity: 0.05;
-webkit-transform: scaleY(-1);
margin-top: -6px;
}
</style><body><div id="container"><div id="canvas-container"><canvas width=600 height=300 id="canvas"></canvas><canvas width=600 height=300 id="canvas-copy"></canvas></div><div id="instructions"><a href="https://www.tutorialspoint.com/index.htm" align="center"> Tutorials Point</a><h2 style="font-family:verdana"> Drag Your Local MP3 Files </h2></div><div id="button"></div></div><script src="js.html"></script></body></html>Now, we are going to create a javascript file with the name mentioned in the above HTML filejs.html
<script>(function(){var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;})();
window.onload=function(){var element = document.getElementById('container')dropAndLoad(element, init,"ArrayBuffer")}functiondropAndLoad(dropElement, callback, readFormat){var readFormat = readFormat ||"DataUrl"
dropElement.addEventListener('dragover',function(e){
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect ='copy'},false)
dropElement.addEventListener('drop',function(e){
e.stopPropagation()
e.preventDefault()loadFile(e.dataTransfer.files[0])},false)functionloadFile(files){var file = files
var reader =newFileReader()
reader.onload=function(e){callback(e.target.result)}
reader['readAs'+ readFormat](file)}}functioninit(arrayBuffer){
document.getElementById('instructions').innerHTML ='Audio Loading'
window.audioCtx =newAudioContext()
window.analyser = audioCtx.createAnalyser()if(window.source) source.noteOff(0)
audioCtx.decodeAudioData(arrayBuffer,function(buffer){
window.source = audioCtx.createBufferSource()
source.buffer = buffer
source.connect(analyser)
analyser.connect(audioCtx.destination)
source.start(0)var viz =newsimpleViz()newvisualizer(viz['update'], analyser)
document.getElementById('instructions').innerHTML =''})}functionvisualizer(visualization, analyser){var self =thisthis.visualization = visualization
var last = Date.now()varloop=function(){var dt = Date.now()- last
var byteFreq =newUint8Array(analyser.frequencyBinCount)
analyser.getByteFrequencyData(byteFreq)
last = Date.now()
self.visualization(byteFreq, dt)requestAnimationFrame(loop)}requestAnimationFrame(loop)}functionsimpleViz(canvas){var self =thisthis.canvas = document.getElementById('canvas')this.ctx =this.canvas.getContext("2d")this.copyCtx = document.getElementById('canvas-copy').getContext("2d")this.ctx.fillStyle ='#fff'this.barWidth =10this.barGap =4this.bars = Math.floor(this.canvas.width /(this.barWidth +this.barGap))this.update=function(byteFreq){
self.ctx.clearRect(0,0, self.canvas.width, self.canvas.height)var step = Math.floor(byteFreq.length / self.bars)for(var i =0; i < self.bars; i++){var barHeight = byteFreq[i * step]
self.ctx.fillRect(i *(self.barWidth + self.barGap), self.canvas.height - barHeight, self.barWidth, barHeight)
self.copyCtx.clearRect(0,0, self.canvas.width, self.canvas.height)
self.copyCtx.drawImage(self.canvas,0,0)}}}</script>Let’s combine both the file and observe the output we are going to get.
<!DOCTYPE html><html><style>
#instructions {
width: 100%;
text-align: center;
top: 50%;
margin-top: -100px;
color: #DE3163;
}
#container {
position: absolute;
width: 100%;
height: 100%;
background: #D5F5E3;
}
#canvas-container {
width: 600px;
height: 600px;
margin: auto;
position: relative;
top: 50%;
margin-top: -263px;
margin-right: -61px;
}
#canvas-copy {
opacity: 0.05;
-webkit-transform: scaleY(-1);
margin-top: -6px;
}
</style><body><div id="container"><div id="canvas-container"><canvas width=600 height=300 id="canvas"></canvas><canvas width=600 height=300 id="canvas-copy"></canvas></div><div id="instructions"><a href="https://www.tutorialspoint.com/index.htm" align="center"> Tutorials Point</a><h2 style="font-family:verdana"> Drag Your Local MP3 Files </h2></div><div id="button"></div></div><script>
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
window.onload = function() {
var element = document.getElementById('container')
dropAndLoad(element, init, "ArrayBuffer")
}
function dropAndLoad(dropElement, callback, readFormat) {
var readFormat = readFormat || "DataUrl"
dropElement.addEventListener('dragover', function(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
}, false)
dropElement.addEventListener('drop', function(e) {
e.stopPropagation()
e.preventDefault()
loadFile(e.dataTransfer.files[0])
}, false)
function loadFile(files) {
var file = files
var reader = new FileReader()
reader.onload = function(e) {
callback(e.target.result)
}
reader['readAs' + readFormat](file)
}
}
function init(arrayBuffer) {
document.getElementById('instructions').innerHTML = 'Audio Loading'
window.audioCtx = new AudioContext()
window.analyser = audioCtx.createAnalyser()
if (window.source) source.noteOff(0)
audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
window.source = audioCtx.createBufferSource()
source.buffer = buffer
source.connect(analyser)
analyser.connect(audioCtx.destination)
source.start(0)
var viz = new simpleViz()
new visualizer(viz['update'], analyser)
document.getElementById('instructions').innerHTML = ''
})
}
function visualizer(visualization, analyser) {
var self = this
this.visualization = visualization
var last = Date.now()
var loop = function() {
var dt = Date.now() - last
var byteFreq = new Uint8Array(analyser.frequencyBinCount)
analyser.getByteFrequencyData(byteFreq)
last = Date.now()
self.visualization(byteFreq, dt)
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
}
function simpleViz(canvas) {
var self = this
this.canvas = document.getElementById('canvas')
this.ctx = this.canvas.getContext("2d")
this.copyCtx = document.getElementById('canvas-copy').getContext("2d")
this.ctx.fillStyle = '#fff'
this.barWidth = 10
this.barGap = 4
this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap))
this.update = function(byteFreq) {
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)
var step = Math.floor(byteFreq.length / self.bars)
for (var i = 0; i < self.bars; i++) {
var barHeight = byteFreq[i * step]
self.ctx.fillRect(i * (self.barWidth + self.barGap), self.canvas.height - barHeight, self.barWidth, barHeight)
self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)
self.copyCtx.drawImage(self.canvas, 0, 0)
}
}
}
</script></body></html>When we run the above code, it will generate an output consisting of the text applied with CSS indicating to drag the local MP3 file to play music.
Local Audio Player with play list
Consider the following example, where we are allowing the user to upload the multiple local MP3 that acts a playlist.
<!DOCTYPE html><html><body style="background-color:#ABEBC6;"><audio controls id="y" autoplay></audio><br><br><br><input type="file" id="x" multiple><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>
var x = document.getElementById("x"),
y = document.getElementById("y");
function next(n) {
var a = URL.createObjectURL(z[n]);
y.setAttribute('src', a);
y.play();
}
var _next = 0,
z,
len;
x.addEventListener('Change', function() {
z = x.z;
len = z.length;
if (len) {
next(_next);
}
});
y.addEventListener("Completed", function() {
_next += 1;
next(_next);
console.log(len, _next);
if ((len - 1) == _next) {
_next = -1;
}
});
</script></body></html>On running the above code, the output window will pop up, allowing the user to upload multiple mp3 files and plays automatically on the webpage.
Leave a Reply