html - One button for more functions = recording in JavaScript -
i have source code record audio in browser. record.js calls scripts provides recording audio , save server.
index.html
<button type="submit" onclick="togglerecording()" data-run="0"></button>
record.js
//starts click on button function togglerecording(button) { var run = parseint(button.getattribute('data-run')); if(run === 1) { recorder && recorder.stop(); recorder && recorder.exportwav(function(blob) { uploadaudiofromblob(blob); }); __log('recording stopped'); button.setattribute('data-run', 0); } else { recorder && recorder.clear(); recorder && recorder.record(); __log('speak...'); button.setattribute('data-run', 1); } } function __log(e, data) { showinfo("\n" + e + " " + (data || '')); } var audio_context; var recorder; function startusermedia(stream) { var input = audio_context.createmediastreamsource(stream); recorder = new recorder(input); __log('system recording available.'); } function startrecording(button) { recorder && recorder.clear(); recorder && recorder.record(); button.nextelementsibling.disabled = false; __log('talk...'); } window.onload=function init() { try { window.audiocontext = window.audiocontext || window.webkitaudiocontext; navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia; window.url = window.url || window.webkiturl; audio_context = new audiocontext; } catch (e) { alert('this browser not support audio!'); } navigator.getusermedia({audio: true}, startusermedia, function(e) { __log('no audio detected: ' + e); }); };
now recording system works in steps:
1.function init()
runs immediatelly when page loaded , after user allows microphone in message startusermedia
function runs
- after clicking on button runs
togglerecording(button)
function starts recording audio
3.second click on button runs togglerecording
function stop recording audio.
i want work system in steps if possible: 1. first click on button run functions init
, startusermedia
, togglerecording
recording starts after clicking 2. second click call togglerecording
function stop recording
i tried modify record.js
code, added part top of source code, click on button called function start_kemt
in stead of togglerecording()
. start_kemt created because want run functions in correct order.
added part record.js
var recording = false; var recordbutton = document.getelementbyid('recordbutton'); //function called click on button function start_kemt() { if(!recording) { init(); togglerecording(recordbutton); } togglerecording(recordbutton); recording = !recording; }
also function init()
modified, change from: window.onload = function init()
function init()
. called clicking on button, not automatically browser. works in way: after click on button show message allow microphone, after allowing message shows that: "'system recording available.' (function startusermedia
called).after recording doesnt start. after second click web browser message showed again allow mic. , error shown in console:
uncaught typeerror: cannot read property 'getattribute' of null
please give me example how right. new in js. topic same as: one button run more functions javascript (recording audio in browser)
well calling method on nothing.
getattribute('data-run');
should this.getattribute('data-run');
or button.getattribute('data-run');
depending on context.