Media recorder audio
No sound, and no errors
thrown. Fails on Safari at line 2 with Promise syntax.
HTML
<center>
<h1>Record your 8 Contra Calls</h1>
<p>You have 3 seconds to record each call. You may play each back, but need not.</p>
<button id="action1" class="action" onclick="handleAction(1)">Start recording 1</button>
<button id="play1" onclick="handlePlay(1)">Play recording 1</button><br>
<button id="action2" class="action" onclick="handleAction(2)">Start recording 2</button>
<button id="play2" onclick="handlePlay(2)">Play recording 2</button><br>
<button id="action3" class="action" onclick="handleAction(3)">Start recording 3</button>
<button id="play3" onclick="handlePlay(3)">Play recording 3</button><br>
<button id="action4" class="action" onclick="handleAction(4)">Start recording 4</button>
<button id="play4" onclick="handlePlay(4)">Play recording 4</button><br>
<button id="action5" class="action" onclick="handleAction(5)">Start recording 5</button>
<button id="play5" onclick="handlePlay(5)">Play recording 5</button><br>
<button id="action6" class="action" onclick="handleAction(6)">Start recording 6</button>
<button id="play6" onclick="handlePlay(6)">Play recording 6</button><br>
<button id="action7" class="action" onclick="handleAction(7)">Start recording 7</button>
<button id="play7" onclick="handlePlay(7)">Play recording 7</button><br>
<button id="action8" class="action" onclick="handleAction(8)">Start recording 8</button>
<button id="play8" onclick="handlePlay(8)">Play recording 8</button><br>
<br>
<h1>Playback your 8 Contra Calls</h1>
<div id="demo"> </div>
<!-- button onclick="changebpm(-25)">-25</button><br -->
<button onclick="startplayback()">Start playback</button>
<button onclick="stopplayback()">Stop playback</button>
<p>Default is 128 beats per minute (bpm)</p>
<div class="container">
<input type="range" name="slider" min="103" max="153" value="128" class="slider" id="slider">
</div>
<div class="center" id="svalue"></div>
<a href="comments.html">Some...
JavaScript
var recordAudio = function recordAudio() {
return new Promise(async function(resolve) {
var stream = await navigator.mediaDevices.getUserMedia({
audio: true
});
var mediaRecorder = new MediaRecorder(stream);
var audioChunks = [];
mediaRecorder.addEventListener("dataavailable", function(event) {
audioChunks.push(event.data);
});
var start = function start() {
audioChunks = [];
mediaRecorder.start();
};
var stop = function stop() {
return new Promise(function(resolve) {
mediaRecorder.addEventListener("stop", function() {
var audioBlob = new Blob(audioChunks);
var audioUrl = URL.createObjectURL(audioBlob);
var audio = new Audio(audioUrl);
var play = function play() {
return audio.play();
};
resolve({
audioChunks: audioChunks,
audioBlob: audioBlob,
audioUrl: audioUrl,
play: play
});
});
mediaRecorder.stop();
});
};
resolve({
start: start,
stop: stop
});
});
};
var sleep = function sleep(time) {
return new Promise(function(resolve) {
return setTimeout(resolve, time);
});
};
var recorder = [];
var audio = [];
var handleAction = async function handleAction(a) {
recorder[a - 1] = await recordAudio();
var actionButton = document.getElementById('action' + a.toString());
actionButton.disabled = true;
recorder[a - 1].start();
await sleep(3000);
audio[a - 1] = await recorder[a - 1].stop();
actionButton.disabled = false;
document.getElementById('play' + a.toString()).style.backgroundColor = "#87CEFA";
};
var handlePlay = async function handlePlay(a) {
if (recorder[a - 1]) {
var playButton = document.getElementById('play' + a.toString());
playButton.disabled = true;
audio[a - 1].play();
await sleep(3000);
playButton.disabled = false;
}
};
var nmoves =...