How to modify this Javascript to work without any html code?
Question
I found a Javascript code that records sound in the browser. It consists of an HTML code and a Javascript code and that's my problem because I only want a Javascript code without HTML code. How can I convert this code to pure Javascript to use in Storyline ? In Storyline , I have two buttons named " Start " And " Stop " to execute Javascript just like the code below.
How Can I get rid of that HTML code and still do sound recording?
HTML Code:
<body>
<div>
<h2>Audio record and playback</h2>
<p>
<button id=startRecord>start</button>
<button id=stopRecord disabled>stop</button>
</p>
<p>
<audio id=recordedAudio></audio>
<a id=audioDownload></a>
</p>
</div>
</body>
JavaScript code:
navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
if (rec.state == "inactive"){
let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
recordedAudio.src = URL.createObjectURL(blob);
recordedAudio.controls=true;
recordedAudio.autoplay=true;
audioDownload.href = recordedAudio.src;
audioDownload.download = 'mp3';
audioDownload.innerHTML = 'download';
}
}
})
.catch(e=>console.log(e));
startRecord.onclick = e => {
startRecord.disabled = true;
stopRecord.disabled=false;
audioChunks = [];
rec.start();
}
stopRecord.onclick = e => {
startRecord.disabled = false;
stopRecord.disabled=true;
rec.stop();
}
Here is the link :
1 answers
solution1
0 ACCPTED 2018-11-04 18:46:19
You can have your javascript create the DOM elements so that your solution requires zero modified HTML, although it seems like a rather obtuse requirement:
;(function() {
let audioChunks = []
const startRecord = document.getElementById('startRecord')
const stopRecord = document.getElementById('stopRecord')
startRecord.addEventListener('click', () => {
startRecord.disabled = true
stopRecord.disabled = false
audioChunks = []
rec.start()
})
stopRecord.addEventListener('click', () => {
startRecord.disabled = false
stopRecord.disabled = true
rec.stop()
})
const recordedAudio = document.createElement('audio')
document.body.appendChild(audio)
navigator.mediaDevices
.getUserMedia({ audio: true })
.then(stream => {
rec = new MediaRecorder(stream)
rec.ondataavailable = e => {
audioChunks.push(e.data)
if (rec.state == "inactive") {
let blob = new Blob(audioChunks, { type: "audio/x-mpeg-3" })
recordedAudio.src = URL.createObjectURL(blob)
recordedAudio.controls = true
recordedAudio.autoplay = true
audioDownload.href = recordedAudio.src
audioDownload.download = "mp3"
audioDownload.innerHTML = "download"
}
}
})
.catch(e => console.log(e))
})()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.