@ -4,6 +4,8 @@ let chunks = [];
var cContext ;
var xie = 1 ;
var mediaRecorder = false ;
var recordEls ;
var state = "idle" ;
var sendFile = function ( blob ) {
const formData = new FormData ( ) ;
@ -16,10 +18,13 @@ var sendFile = function (blob) {
} ) ;
}
var analyser , dataArray , barW , waves ;
var initVisual = function ( stream ) {
waves = [ ] ;
var audioContext = new AudioContext ( ) ;
const ms = audioContext . createMediaStreamSource ( stream ) ;
var analyser = audioContext . createAnalyser ( ) ;
analyser = audioContext . createAnalyser ( ) ;
ms . connect ( analyser ) ;
analyser . connect ( audioContext . destination ) ;
@ -27,36 +32,25 @@ var initVisual = function (stream) {
analyser . fftSize = 128 ;
var bufferLength = analyser . frequencyBinCount ;
var dataArray = new Uint8Array ( bufferLength ) ;
var barW = canvasEl . width / bufferLength ;
dataArray = new Uint8Array ( bufferLength ) ;
barW = 29 ;
}
var waves = [ ] ;
var animateVisual = function ( ) {
var animateVisual = function ( ) {
var cHeight = canvasEl . height ;
cContext . clearRect ( 0 , 0 , canvasEl . width , canvasEl . height ) ;
// scale from 0 to 255
analyser . getByteFrequencyData ( dataArray ) ;
// if height is 510 then maxscale/2;
// height is (canvasEl.height/2)/255
var hRatio = ( canvasEl . height ) / 255 ;
// analyser.getByteTimeDomainData(dataArray);
var hRatio = ( canvasEl . height ) / 255 ;
// clear the previous shape
// cContext.fillStyle = "rgba(0, 0, 0, 1)";
cContext . beginPath ( ) ;
// cContext.rect(0, 0, canvasEl.width, canvasEl.height);
cContext . fill ( ) ;
cContext . fill ( ) ;
cContext . fillStyle = "#231F20" ;
waves . push ( dataArray [ 0 ] ) ;
var max = 144 ;
@ -64,27 +58,22 @@ var initVisual = function (stream) {
waves . shift ( ) ;
}
cContext . fillStyle = "#231F20" ;
var barWidth = Math . ceil ( canvasEl . width / max ) ;
// first value is oldest value
for ( var i = waves . length ; i > 0 ; i -- ) {
var x = canvasEl . width / 2 - ( ( waves . length - i ) * barWidth ) ;
var x = canvasEl . width - ( ( waves . length - i ) * barWidth ) ;
var y = canvasEl . height / 2 ;
var bHeight = waves [ i ] * hRatio ;
console . log ( waves [ i ] ) ;
cContext . fillRect ( x , y - ( bHeight / 2 ) , barWidth , bHeight )
cContext . fillRect ( x , y - ( bHeight / 2 ) , barWidth , bHeight )
}
if ( state === "recording" ) {
requestAnimationFrame ( animateVisual ) ;
}
} else {
cContext . clearRect ( 0 , 0 , canvasEl . width , canvasEl . height ) ;
animateVisual ( ) ;
}
}
@ -98,7 +87,6 @@ var initRecording = function (autostart) {
initVisual ( stream ) ;
mediaRecorder = new MediaRecorder ( stream ) ;
mediaRecorder . ondataavailable = ( e ) => {
chunks . push ( e . data ) ;
} ;
@ -108,13 +96,30 @@ var initRecording = function (autostart) {
type : mediaRecorder . mimeType
} ) ;
chunks = [ ] ;
sendFile ( blob ) . then ( ( data ) => {
micEl . setAttribute ( "state" , "finished" ) ;
sendFile ( blob ) . then ( ( response ) => {
if ( response . status == 200 ) {
console . log ( "all went well" ) ;
} else {
alert ( "Ooops (" + response . status + ").... something went wrong. we are saving the file on your device instead" ) ;
var a = document . createElement ( "a" ) ;
document . body . appendChild ( a ) ;
a . style = "display: none" ;
var url = window . URL . createObjectURL ( blob ) ;
a . href = url ;
a . download = new Date ( ) + ".webm" ;
a . click ( ) ;
window . URL . revokeObjectURL ( url ) ;
}
state = "finished" ;
updateAllStates ( state ) ;
} ) ;
}
if ( autostart ) {
mediaRecorder . start ( ) ;
animateVisual ( ) ;
}
} )
} else {
@ -122,51 +127,88 @@ var initRecording = function (autostart) {
}
}
var startRecording = function ( e ) {
var startRecording = function ( ) {
if ( ! mediaRecorder ) {
console . log ( "did not initalise" ) ;
initRecording ( tru e) ;
e . currentTarget . setAttribute ( "state" , "recording" ) ;
initRecording ( fals e) ;
} else {
if ( mediaRecorder . state === "recording" ) {
console . log ( "recording was already happening" )
mediaRecorder . stop ( ) ;
e . currentTarget . setAttribute ( "state" , "uploading" ) ;
state = "uploading" ;
updateAllStates ( state ) ;
} else {
console . log ( "not yet recording, about tos tart" ) ;
mediaRecorder . start ( ) ;
e. currentTarget . setAttribute ( "active" , "recording" ) ;
animateVisual( ) ;
}
}
}
var updateAllStates = function ( newState ) {
document . body . setAttribute ( "state" , newState ) ;
recordEls . forEach ( ( el ) => {
el . setAttribute ( "state" , newState )
} )
}
var onRecordElsClick = function ( e ) {
console . log ( e . currentTarget )
var target = e . currentTarget . getAttribute ( "target" ) ;
if ( state === "idle" ) {
state = "waiting" ;
initRecording ( false ) ;
e . currentTarget . setAttribute ( "state" , state ) ;
document . body . setAttribute ( "state" , state + "--" + e . currentTarget . getAttribute ( "target" ) ) ;
} else if ( state === "waiting" ) {
if ( e . currentTarget . getAttribute ( "state" ) === "waiting" ) {
state = "idle" ;
e . currentTarget . setAttribute ( "state" , state ) ;
document . body . setAttribute ( "state" , state ) ;
} else {
state = "recording" ;
startRecording ( ) ;
updateAllStates ( state ) ;
}
} else if ( state === "recording" ) {
state === "uploading" ;
updateAllStates ( state ) ;
mediaRecorder . stop ( ) ;
}
}
window . onload = function ( ) {
console . log ( "load app" ) ;
micEl = document . querySelector ( '.fn-start-recording' ) ;
recordEls = document . querySelectorAll ( ".fn-touch-record" ) ;
document . body . setAttribute ( "state" , state ) ;
recordEls . forEach ( ( el ) => {
el . addEventListener ( "click" , onRecordElsClick )
} )
canvasEl = document . querySelector ( 'canvas' ) ;
canvasEl . width = window . innerWidth ;
canvasEl . height = window . innerHeight ;
cContext = canvasEl . getContext ( "2d" ) ;
infoButEl = document . querySelector ( '.fn-open-dialog-info' ) ;
formButEl = document . querySelector ( '.fn-open-dialog-form' ) ;
formDialogEl = document . querySelector ( '.fn-dialog-form' ) ;
infoDialogEl = document . querySelector ( ".fn-dialog-info" ) ;
micEl . addEventListener ( 'click' , startRecording ) ;
infoButEl . addEventListener ( "click" , function ( e ) {
e . preventDefault ( ) ;
infoDialogEl . showModal ( ) ;
} )
formButEl . addEventListener ( 'click' , function ( e ) {
document . querySelectorAll ( '.fn-open-dialog-form' ) . forEach ( ( button ) => {
button . addEventListener ( "click" , function ( e ) {
e . preventDefault ( ) ;
formDialogEl . showModal ( ) ;
} )
} )
}
