You might have seen some wave like visuals representing the audio waves in many players or audio editing tools.
Let’s see how that feature can be added simply using an available library of JS.
Wavesurfer.js is a library that would help us achieve this. Using this feature is as simple as just importing a library. You can check the documentation of wavesurfer here
Let’s create a HTML page that will accept an audio/video file and when submitted, it shows the visual representation
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio visual</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.timeline.js"></script>
<style>
#control-panel{
padding-bottom : 18px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="waveform"></div>
<div id="wave-timeline"></div>
 
<div class="controls col-md-12" id="control-panel">
<div class="col-md-2"><button id="play-btn" class="btn btn-primary" onclick="wavesurfer.playPause()">
<i class="glyphicon glyphicon-play"></i>
Play
/
<i class="glyphicon glyphicon-pause"></i>
Pause
</button>
</div>
<div class="col-sm-1 text-center">
<i class="glyphicon glyphicon-zoom-out" title="slide left for zoom-out"></i>
</div>
<div class="col-sm-3">
<input id="slider" data-action="zoom" type="range" min="20" max="200" value="0" style="width: 100%">
</div>
<div class="col-sm-1 text-center">
<i class="glyphicon glyphicon-zoom-in" title="slide right for zoom-in"></i>
</div>
</div>
<br>
<div class="controls col-md-12">
<div class="col-md-4"> <input id="loadFile"class="btn btn-primary" type="file"></input></div>
<div class="col-md-2"> <input class="btn btn-primary" type="submit" value="submit" onclick="submit()" ></input></div>
</div>
</div>
</body>The above html code would take care of uploading a audio file and send it to wavesurfer library on clicking submit button.
Let’s look at the js code now. This code can either be placed a separated js file and imported or you can add append this code between <script></script> before ending html tag.
var ctrlPanel = document.getElementById('control-panel');
var wavePanel = document.getElementById('waveform');
ctrlPanel.style.display = "none";
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
scrollParent: true,
notchPercentHeight: 90,
plugins: [
WaveSurfer.timeline.create({
container: "#wave-timeline"
})
]
});
function submit(){
var lFile = $('#loadFile').prop("files")[0];
if(lFile !== undefined && lFile !== ""){
var bFile = new Blob([lFile]);
console.log(bFile);
document.getElementById("waveform").style.border = "1px black solid";
wavesurfer.loadBlob(bFile);
wavesurfer.on('ready', function () {
wavesurfer.play();
ctrlPanel.style.display = "block"; });
}
else{
console.log("empty file");
}
document.querySelector('#slider').oninput = function () {
wavesurfer.zoom(Number(this.value));
};
}That’s it! you’re good to go now. You can access this html file through apache and upload a audio/video file to get the audio visual