Audio Compare

Developer
Pete Nawara
Size
7,239 Kb
Views
10,120
  1. Audio Compare Previews
  2. Audio Compare HTML Codes
  3. Audio Compare CSS Codes
  4. Audio Compare JS Codes

How do I make an audio compare?

Compare two different versions of the same audio file.1st iteration needs - switch play button to play/pause. What is a audio compare? How do you make a audio compare? This script and codes were developed by Pete Nawara on 13 December 2022, Tuesday.

Audio Compare Previews
IQ Test

Audio Compare - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Audio Compare</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-weight: 100; background: #f8f7f6; color: #382e2c;
}
input[type="radio"] { display: none;
}
input[type="radio"] + label { color: #746d6b; text-indent: 40px; position: relative; transtion: .4s;
}
input[type="radio"] + label span { position: absolute; left: 0px; top: -2px; display: inline-block; width: 30px; height: 30px; cursor: pointer; -moz-border-radius: 50%; border-radius: 50%; background-color: #b6ada5; transition: .4s;
}
input[type="radio"] + label span:after { content: ""; display: block; width: 10px; height: 10px; background: transparent; border-radius: 100%; position: absolute; top: 10px; left: 10px; transition: .4s;
}
input[type="radio"]:checked + label { color: #382e2c; transtion: .4s;
}
input[type="radio"]:checked + label span { background-color: #ea7200; transition: 0.4s;
}
input[type="radio"]:checked + label span:after { background: #fff; transition: 1s .2s;
}
.card { background: #fff; border: 0; border-radius: 0;
}
.card .card-block { background: #e9e6e4;
}
.card .card-block.blank-bg { background: #f8f7f6;
}
.demo-view { background: pink; margin-top: 1px; display: flex; align-items: stretch; align-content: stretch;
}
.demo-view .scene-view { background: #253746; margin-right: 1px; padding: 15px; display: flex; align-items: center;
}
.demo-view .scene-view .scene { width: 100%;
}
.controls { background: #e2dedb;
}
.controls .form-group { margin-bottom: 0;
}
.controls .form-group .radio { padding: 10px 0; margin-bottom: 1px;
}
.material-icons { text-align: center;
}
.material-icons.primary { color: #ea7200;
}
.material-icons.secondary { color: #9c9695;
}
.material-icons.button { padding: 14px; cursor: pointer; background: #e9e6e4; transition: .4s;
}
.material-icons.button:hover { background: #f1efed; transition: .4s;
}
.player { margin: 1px 0; display: flex;
}
.player .playbar { width: 100%; position: relative; padding: 5px 20px; background: #e9e6e4; margin: 0 1px;
}
.player .playbar .currenttrack { margin-top: .2rem; font-size: 10px;
}
.player .playbar .trackbar { border-radius: 5px; height: 10px; background-color: #d4cec9; width: 100%; margin-top: .2rem;
}
.player .playbar .trackbar .trackprogress { background-color: #ea7200; color: red; border-radius: 5px; height: 10px; width: 0%;
}
.player .vol { margin-right: 1px;
}
.tracktime { font-size: 9px;
}
.tracktime .current { text-align: left;
}
.tracktime .total { text-align: right;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="container m-t-1"> <div class="row p-a-3"> <audio id="audio1" src="http://styleguide.tietgenlabs.com/imgs/samples/test2.wav" loop="" title="Open Ear"></audio> <audio id="audio2" src="http://styleguide.tietgenlabs.com/imgs/samples/test1.wav" loop="" title="Blocked Ear"></audio> <div class="col-xs-8 offset-xs-2"> <div class="card"> <div class="card-block p-t-1"> <div class="card-title m-b-0"> Audio Compare</div> </div> <div class="card-block p-a-0 demo-view blank-bg"> <div class="col-xs-2 scene-view"> <img class="scene" src="http://styleguide.tietgenlabs.com/imgs/scene-acoustic.svg"/></div> <div class="col-xs-10 controls p-a-1"> <fieldset class="form-group"> <div class="radio"> <input class="radio" id="radio01" type="radio" name="listening-environment" checked="checked"/> <label for="radio01">Normal Audio <span></span></label> </div> <div class="radio"> <input class="radio" id="radio02" type="radio" name="listening-environment"/> <label for="radio02">Reverb Audio<span></span></label> </div> <!--button#toggle.btn.btn-secondary.btn-block Toggle the listening environment--> </fieldset> </div> </div> <div class="player p-a-0"><i class="material-icons play_pause button primary" id="start">play_circle_outline </i> <div class="playbar"> <div class="currenttrack" id="currTrack">Click Play to Start</div> <div class="trackbar" id="progress"> <div class="trackprogress" id="trackProgress"></div> </div> <div class="tracktime" id="trackTime"> <div class="current pull-xs-left" id="currentTime">0:00</div> <div class="total pull-xs-right" id="duration">-</div> </div> </div><i class="material-icons button secondary vol" id="start">volume_up</i><i class="material-icons button secondary">launch</i> </div> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Audio Compare - Script Codes CSS Codes

body { font-weight: 100; background: #f8f7f6; color: #382e2c;
}
input[type="radio"] { display: none;
}
input[type="radio"] + label { color: #746d6b; text-indent: 40px; position: relative; transtion: .4s;
}
input[type="radio"] + label span { position: absolute; left: 0px; top: -2px; display: inline-block; width: 30px; height: 30px; cursor: pointer; -moz-border-radius: 50%; border-radius: 50%; background-color: #b6ada5; transition: .4s;
}
input[type="radio"] + label span:after { content: ""; display: block; width: 10px; height: 10px; background: transparent; border-radius: 100%; position: absolute; top: 10px; left: 10px; transition: .4s;
}
input[type="radio"]:checked + label { color: #382e2c; transtion: .4s;
}
input[type="radio"]:checked + label span { background-color: #ea7200; transition: 0.4s;
}
input[type="radio"]:checked + label span:after { background: #fff; transition: 1s .2s;
}
.card { background: #fff; border: 0; border-radius: 0;
}
.card .card-block { background: #e9e6e4;
}
.card .card-block.blank-bg { background: #f8f7f6;
}
.demo-view { background: pink; margin-top: 1px; display: flex; align-items: stretch; align-content: stretch;
}
.demo-view .scene-view { background: #253746; margin-right: 1px; padding: 15px; display: flex; align-items: center;
}
.demo-view .scene-view .scene { width: 100%;
}
.controls { background: #e2dedb;
}
.controls .form-group { margin-bottom: 0;
}
.controls .form-group .radio { padding: 10px 0; margin-bottom: 1px;
}
.material-icons { text-align: center;
}
.material-icons.primary { color: #ea7200;
}
.material-icons.secondary { color: #9c9695;
}
.material-icons.button { padding: 14px; cursor: pointer; background: #e9e6e4; transition: .4s;
}
.material-icons.button:hover { background: #f1efed; transition: .4s;
}
.player { margin: 1px 0; display: flex;
}
.player .playbar { width: 100%; position: relative; padding: 5px 20px; background: #e9e6e4; margin: 0 1px;
}
.player .playbar .currenttrack { margin-top: .2rem; font-size: 10px;
}
.player .playbar .trackbar { border-radius: 5px; height: 10px; background-color: #d4cec9; width: 100%; margin-top: .2rem;
}
.player .playbar .trackbar .trackprogress { background-color: #ea7200; color: red; border-radius: 5px; height: 10px; width: 0%;
}
.player .vol { margin-right: 1px;
}
.tracktime { font-size: 9px;
}
.tracktime .current { text-align: left;
}
.tracktime .total { text-align: right;
}

Audio Compare - Script Codes JS Codes

var startButton = document.getElementById("start");
var toggleButton = document.getElementById("toggle");
var currTrack = document.getElementById("currTrack");
var curentTime = document.getElementById("currentTime");
var duration = document.getElementById("duration");
var progress = document.getElementById("progress");
var progressMeter = document.getElementById("trackProgress");
var track1 = document.getElementById("audio1");
var track2 = document.getElementById("audio2");
var trackList = [track1, track2];
var currentTimeoutId; // used to clear timeouts created in `displayTime`
function displayTime(track) { currentTime.innerHTML = timeString(track.currentTime); duration.innerHTML = timeString(track.duration); progress.value = track.currentTime; progress.max = track.duration; progressMeter.style.width = percentCompleteString(track); /** * This line calls this function again (recursively) after * the number of milliseconds specified as the second argument. * The smaller the number, the more fluid the animation (but the * more resource-intensive as well). * * This method gives us an update every X-milliseconds instead of * the randome values of 50-250 milliseconds we get from the * `ontimeupdate` event. * * We store so we can stop executing `displayTime` if the user * pauses playback by calling `clearTimeout` and passing the * value returned from `setTimeout` below. */ currentTimeoutId = setTimeout(displayTime, 30, track);
}
function timeString(msDuration) { var current_s = parseInt(msDuration % 60); var current_m = parseInt((msDuration / 60) % 60); var seconds_string = current_s < 10 ? "0" + current_s : current_s; return current_m + ":" + seconds_string;
}
function percentCompleteString(track) { return percentComplete(track) + "%";
}
function percentComplete(track) { return track.currentTime / track.duration * 100;
}
function playAudio() { displayTime(track1); track1.play(); track2.play();
}
function pauseAudio() { track1.pause(); track2.pause(); // take weight off event loop for updating progress meter clearTimeout(currentTimeoutId);
}
/** * NOTE: This currently only works with * 2 tracks...adding a 3rd will break * things as this stands
*/
function swapTrack() { var newTrack; trackList.forEach(function(track) { track.muted = !track.muted; if(!track.muted) { newTrack = track; } }) return newTrack;
}
startButton.onclick = function() { // alert("click"); currTrack.innerHTML = track1.title; if (track1.paused) { // alert("click"); startButton.innerHTML = "pause_circle_outline"; playAudio(); track2.muted = true; toggleButton.disabled = false; } else { startButton.innerHTML = "play_circle_outline"; pauseAudio(); toggleButton.disabled = true; } };
toggleButton.onclick = function() { var newTrack = swapTrack(); currTrack.innerHTML = newTrack.title; };
// no longer necessary since we are recursively calling
// `displayTime` when we call `playAudio()`
//track1.ontimeupdate = function() {displayTime(track1)};
Audio Compare - Script Codes
Audio Compare - Script Codes
Home Page Home
Developer Pete Nawara
Username petebot
Uploaded December 13, 2022
Rating 3
Size 7,239 Kb
Views 10,120
Do you need developer help for Audio Compare?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pete Nawara (petebot) Script Codes
Name
CSS Modal
Card flip
Dynamic Logo Creation
ScrollMagic playpen
Woman in Vintage Sunglasses
Notifications
KITT
Toggle Time
History Viewer
The Team
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!