Skip to content

Commit

Permalink
corrected file
Browse files Browse the repository at this point in the history
  • Loading branch information
@Imimimikimmmi
Imimimikimmmi committed Nov 11, 2023
1 parent 82082da commit f15f093
Showing 1 changed file with 305 additions and 43 deletions.
348 changes: 305 additions & 43 deletions audio-compression/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,324 @@
<!DOCTYPE html>
<html lang="en-CA">
<head>
<title>Maxime Bechard-Pelletier basic page</title>
<title>Audio compression assignment</title>

<link rel="stylesheet" href="style.css">

<meta charset="UTF-8">

<script>
var whichAudio = 'brass';
var thisAudio = 'brass';
const compressionTypes = ['mp3','ogg','ac3','m4a'];
const tableColumns = [
'Filename',
'Compression algorythm',
'Bit rate',
'Original size',
'Compressed size',
'Compression ratio',
'Link to original audio',
'Link to compressed audio',
'Link to residual audio'
];

const brass = {
name: 'Brass band',
fileoriginal: 'brassbandindoor-wav.wav',
filebasename: 'brassbandindoor-',
wavsize: 11.1,
mp3highsize: 2.5,
mp3highrate: '320 kbps',
mp3lowsize: 1.2,
mp3lowrate: '96 kbps',
ogghighsize: 3.4,
ogghighrate: 'Level 10',
ogglowsize: 0.5,
ogglowrate: 'Level 1',
ac3highsize: 2.5,
ac3highrate: '320 kbps',
ac3lowsize: 0.8,
ac3lowrate: '96 kbps',
m4ahighsize: 2.3,
m4ahighrate: '320 kbps',
m4alowsize: 1.6,
m4alowrate: '100 kbps',
};

const piano = {
name: 'Piano sample',
filebasename: 'piano-loops-',
wavsize: 11.1,
mp3highsize: 2.5,
mp3highrate: '320 kbps',
mp3lowsize: 0.9,
mp3lowrate: '96 kbps',
ogghighsize: 3.0,
ogghighrate: 'Level 10',
ogglowsize: 0.5,
ogglowrate: 'Level 1',
ac3highsize: 2.5,
ac3highrate: '320 kbps',
ac3lowsize: 0.8,
ac3lowrate: '96 kbps',
m4ahighsize: 2.1,
m4ahighrate: '320 kbps',
m4alowsize: 1.6,
m4alowrate: '100 kbps',
};

</script>

</head>

<body>
<div id="menu">
<a href="assignments.html">Assignments page</a>
</div>


<section id="content">
<h1>MUMT301 - Audio Compression Assignment</h1>

<img class="photo-maxbp" src="maxime-picture.jpg" />
<div id="personal-infos">
<h1>Maxime Béchard-Pelletier</h1>
<p>I am Maxime, I study jazz and I like:</p>
<ul>
<li>Jazz</li>
<li>Merengue</li>
<li>Salsa</li>
<li>Funk</li>
</ul>
<div id="audio-player">
<p></p>
<audio controls>
<source src="test.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<hr />

<h3>Classmates' Web pages:</h3>
<ul>
<li><a href="https://mumt301.github.io/Mota_Repo/" target="_blank">Adam Motaouakkil</a></li>
<li><a href="https://mumt301.github.io/MUMT301Assignment1Burns/" target="_blank">Harry Burns</a></li>
<li><a href="https://mumt301.github.io/peter-bullard/" target="_blank">Peter Bullard</a></li>
<li><a href="https://mumt301.github.io/Isaacluther/" target="_blank">Isaac Luther</a></li>
<li><a href="https://mumt301.github.io/Jeff_Leon_MUMT_301/" target="_blank">Jean-François Léon</a></li>
</ul>

<h3>My classes for this semester:</h3>
<ul>
<li><a href="https://www.mcgill.ca/study/2022-2023/courses/mumt-301" target="_blank">MUMT 301 - Music and the Internet</a></li>
<li><a href="https://www.mcgill.ca/study/2022-2023/courses/muen-570" target="_blank">MUEN 570 - Jazz Combo</a></li>
<li><a href="https://www.mcgill.ca/study/2022-2023/courses/muin-110" target="_blank"></a>MUIN 110 Elective Practical Instruction 1</a></li>
<li><a href="https://www.mcgill.ca/study/2022-2023/courses/mujz-461d1" target="_blank">MUJZ 461D1 Advanced Jazz Arranging</a></li>
<li><a href="https://www.mcgill.ca/study/2022-2023/courses/mupd-560" target="_blank">MUPD 560 Introduction to Research Methods in Music</a></li>
<li><a href="https://www.mcgill.ca/study/2022-2023/courses/muth-150" target="_blank"></a>MUTH 150 Theory and Analysis 1</a></li>
</ul>

</section>
<h3>Maxime Béchard-Pelletier</h3>
<p>Click on the button below to switch audio source</p>

<div id="audio-table-wrapper">
<button id="toggle-button">switch to <span class="audio-type"></span></button>
<h3>Audio compression table - <span class="audio-sample-title"></span> </h3>

<footer>
<div class="footer-copyright">
copyright © 2023 Maxime Béchard-Pelletier
<div id="audio-table"></div>
</div>
</footer>

</body>

</html>

</section>



<script>

// We show the default audio sample table
showAudioTitle(whichAudio);
createTable(whichAudio);
addEventToAudio();


let toggleButton = document.querySelector('#toggle-button');
toggleButton.addEventListener('click', event => {
// We first switch the audio's title
if( whichAudio == 'brass' ) {
whichAudio = 'piano';
} else {
whichAudio = 'brass';
}

showAudioTitle(whichAudio);

let currentTable = document.querySelector('#audio-table');
while( currentTable.hasChildNodes() ) { currentTable.firstChild.remove(); }

createTable(whichAudio);
addEventToAudio();
});







function showAudioTitle(currentAudio) {
let title = '';
let next = '';
let titleSpan = document.querySelector('#audio-table-wrapper .audio-sample-title');
let typeSpan = document.querySelector('#toggle-button .audio-type');

if( currentAudio == 'brass' ) {
title = brass['name'];
next = 'piano';
}
if( currentAudio == 'piano' ) {
title = piano['name'];
next = 'brass';
}

titleSpan.innerHTML = title;
typeSpan.innerHTML = next+' audio sample';
}


function createTable(audioSample) {
if( audioSample == 'brass' ) { thisAudio = brass; } else { thisAudio = piano; }
const tableWrapper = document.querySelector('#audio-table');

const table = document.createElement("table");

const tr = document.createElement("tr");
table.append(tr);
tableColumns.forEach((element) => {
const th = document.createElement("th");
const textnode = document.createTextNode(element);
th.appendChild(textnode);
tr.appendChild(th);
});

compressionTypes.forEach((element) => {
const originalFileName = thisAudio['filebasename']+'wav.wav';
const folder = '/MaxBP/audio-compression/audiofiles/';
var ratio = 0;
var audioType = '';
if( element == 'ogg' ) {
audioType = 'audio/ogg';
} else {
audioType = 'audio/mpeg';
}

// LOW RES
var trlow = document.createElement("tr");
table.append(trlow);
var td = document.createElement("td");
var textnode = document.createTextNode(thisAudio['filebasename']+element+'low.'+element);
td.appendChild(textnode);
trlow.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(element);
td.appendChild(textnode);
trlow.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(thisAudio[element+'lowrate']);
td.appendChild(textnode);
trlow.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(thisAudio['wavsize']+' Mb');
td.appendChild(textnode);
trlow.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(thisAudio[element+'lowsize']+' Mb');
td.appendChild(textnode);
trlow.appendChild(td);
ratio = Math.round( ( thisAudio[element+'lowsize'] / thisAudio['wavsize'] ) * 100) / 100;
td = document.createElement("td");
textnode = document.createTextNode(ratio);
td.appendChild(textnode);
trlow.appendChild(td);

td = document.createElement("td");
var a = document.createElement('a');
var link = document.createTextNode("Original audio");
a.appendChild(link);
a.href = folder+thisAudio['filebasename']+'wav.wav';
a.dataset.type = 'audio/wav';
td.appendChild(a);
trlow.appendChild(td);
td = document.createElement("td");
a = document.createElement('a');
link = document.createTextNode("Compressed audio");
a.appendChild(link);
a.href = folder+thisAudio['filebasename']+element+'low.'+element;
a.dataset.type = audioType;
td.appendChild(a);
trlow.appendChild(td);
td = document.createElement("td");
a = document.createElement('a');
link = document.createTextNode("Residual audio");
a.appendChild(link);
a.href = folder+thisAudio['filebasename']+element+'low-noise.wav';
a.dataset.type = 'audio/wav';
td.appendChild(a);
trlow.appendChild(td);

// HIGH RES
var trhigh = document.createElement("tr");
table.append(trhigh);
td = document.createElement("td");
textnode = document.createTextNode(thisAudio['filebasename']+element+'high.'+element);
td.appendChild(textnode);
trhigh.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(element);
td.appendChild(textnode);
trhigh.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(thisAudio[element+'highrate']);
td.appendChild(textnode);
trhigh.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(thisAudio['wavsize']+' Mb');
td.appendChild(textnode);
trhigh.appendChild(td);
td = document.createElement("td");
textnode = document.createTextNode(thisAudio[element+'highsize']+' Mb');
td.appendChild(textnode);
trhigh.appendChild(td);
ratio = Math.round( ( thisAudio[element+'highsize'] / thisAudio['wavsize'] ) * 100) / 100;
td = document.createElement("td");
textnode = document.createTextNode(ratio);
td.appendChild(textnode);
trhigh.appendChild(td);

td = document.createElement("td");
a = document.createElement('a');
link = document.createTextNode("Original audio");
a.appendChild(link);
a.href = folder+thisAudio['filebasename']+'wav.wav';
a.dataset.type = 'audio/wav';
td.appendChild(a);
trhigh.appendChild(td);
td = document.createElement("td");
a = document.createElement('a');
link = document.createTextNode("Compressed audio");
a.appendChild(link);
a.href = folder+thisAudio['filebasename']+element+'high.'+element;
a.dataset.type = audioType;
td.appendChild(a);
trhigh.appendChild(td);
td = document.createElement("td");
a = document.createElement('a');
link = document.createTextNode("Residual audio");
a.appendChild(link);
a.href = folder+thisAudio['filebasename']+element+'high-noise.wav';
a.dataset.type = 'audio/wav';
td.appendChild(a);
trhigh.appendChild(td);

});

tableWrapper.append(table);

}


function addEventToAudio() {
let audioFiles = document.querySelectorAll('#audio-table td a');
audioFiles.forEach ((item) => {
item.addEventListener('click', event => {
event.preventDefault();

var type = event.target.dataset.type;
var link = event.target.href;
const playerDiv = document.querySelector('#audio-player');
const playerDivTitle = document.querySelector('#audio-player p');
playerDivTitle.textContent = 'Now playing: '+link;

playerDiv.style.display = "block";
const player = document.querySelector('#audio-player audio');

player.src = link;
player.type = type;
player.play();
});
});

}

</script>


</body>

</html>

0 comments on commit f15f093

Please sign in to comment.