< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" > < / script >
< script type = "text/javascript" src = "js/jquery.min.js" > < / script >
< script type = "text/javascript" src = "js/mp3recorder.js" > < / script >
< link href = "styles/stylesheet.css" rel = "stylesheet" type = "text/css" >
< / head >
< body >
< div class = "navbar" >
< a href = "podcast1.php" class = "active" > Podcast1 < / a >
< a href = "podcast2.php" > Podcast2 < / a >
< a href = "podcast3.php" > Podcast3 < / a >
< a href = "podcast4.php" > Podcast4 < / a >
< / div >
< h3 >
"Mediating speech"
< / h3 >
This podcast is a series of episodes of moments of an online audio archive overlayered by my voice as a narrator.
< table > < tr >
<?php
$files = glob("podcasts/podcast1/*.mp3");
for ($i=0; $i< count ( $ files ) ; $ i + + )
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '< td > < div class = "tooltip-wrap" > < audio src = '.$num.' controls > < / audio > < div class = "tooltip-content-down" style = "min-width:1100px; > ';include $num.'.txt';
echo '< / div > < p style = "font-size:14px;line-height:1;text-align: left;" > ';
include $num.'-METADATA.txt';
echo '< / p > < / div > < / td > '; } ?>
< / tr > < / table >
< br >
< div align = "center" >
< div style = "width: 500px;border:1px red;border-style: dashed;padding: 10px;" >
< p > Dear listener,< / p >
< p > you are invited to amplify parts of the podcasts that you find interesting by repeating or annotate them with your vocal messages. You can listen to the podcasts with headphones and record with any microphone. < / p >
<!-- keep the time of file limited -->
<!-- https://github.com/mdn/web - dictaphone/ -->
<!-- <div class="wrapper">
< section class = "main-controls" >
< canvas class = "visualizer" height = "60px" > < / canvas >
< div id = "buttons" >
< button class = "record" > Record< / button >
< button class = "stop" > Stop< / button >
< / div >
< / section >
< section class = "sound-clips" >
< / section >
< / div > -->
<!-- voice visualizer/LICENSE web dictaphone -->
<!-- recorder -->
< div class = "recorder" >
< input type = "button" class = "start" value = "Record" / >
< input type = "button" class = "stop" value = "Stop" / >
< pre class = "status" > < / pre >
< / div >
< div > < button onclick = "upload()" > Upload< / button > < / div >
< div id = "playerContainer" > < / div >
< div id = "dataUrlcontainer" hidden > < / div >
< pre id = "log" hidden > < / pre >
< / div >
< br / >
< br / >
< br / >
<?php
$files = glob("uploads/*.wav");
for ($i=0; $i< count ( $ files ) ; $ i + + )
{$num = $files[$i];
$var1 = $_GET["files"]["name"];
echo '< audio src = '.$num.' controls > < / audio > < br / > < br / > '; }
?>
< / div >
<!-- scripts for dictaphone -->
<!-- <script src="scripts/mediaDevices - getUserMedia - polyfill.js"></script> -->
<!-- Below is your custom application script -->
<!-- <script src="scripts/app.js"></script> -->
<!-- script for subs and sound -->
< script >
var dialogueTimings = [10,24,28,58,115,120,124,134,138,142,152,160],
dialogues = document.querySelectorAll('#transcript>div'),
transcriptWrapper = document.querySelector('#transcriptWrapper'),
audio = document.querySelector('#a2'),
previousDialogueTime = -1;
function playTranscript() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v < = audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];
transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking','');
currentDialogue.className +=' speaking';
}
}
;
< / script >
<!-- scripts for recorder -->
< script type = "text/javascript" >
var audio_context;
function __log(e, data) {
log.innerHTML += "\n" + e + " " + (data || '');
}
$(function() {
try {
// webkit shim
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
window.URL = window.URL || window.webkitURL;
var audio_context = new AudioContext;
__log('Audio context set up.');
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
$('.recorder .start').on('click', function() {
$this = $(this);
$recorder = $this.parent();
navigator.getUserMedia({audio: true}, function(stream) {
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
$recorder.data('recorderObject', recorderObject);
recorderObject.start();
}, function(e) { });
});
$('.recorder .stop').on('click', function() {
$this = $(this);
$recorder = $this.parent();
recorderObject = $recorder.data('recorderObject');
recorderObject.stop();
recorderObject.exportWAV(function(base64_wav_data) {
var url = 'data:audio/wav;base64,' + base64_wav_data;
var au = document.createElement('audio');
document.getElementById("playerContainer").innerHTML = "";
// console.log(url)
var duc = document.getElementById("dataUrlcontainer");
duc.innerHTML = url;
au.controls = true;
au.src = url;
//$recorder.append(au);
$('#playerContainer').append(au);
recorderObject.logStatus('');
});
});
});
< / script >
< script >
function upload(){
var dataURL = document.getElementById("dataUrlcontainer").innerHTML;
$.ajax({
type: "POST",
url: "scripts/uploadWav.php",
data: {
wavBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
< / script >
< / body >
< / html >
