-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtry.html
126 lines (99 loc) · 2.8 KB
/
try.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<script>
let audioIN = { audio: true };
// audio is true, for recording
// Access the permission for use
// the microphone
navigator.mediaDevices.getUserMedia(audioIN)
// 'then()' method returns a Promise
.then(function (mediaStreamObj) {
// Connect the media stream to the
// first audio element
let audio = document.querySelector('audio');
//returns the recorded audio via 'audio' tag
// 'srcObject' is a property which
// takes the media object
// This is supported in the newer browsers
if ("srcObject" in audio) {
audio.srcObject = mediaStreamObj;
}
else { // Old version
audio.src = window.URL
.createObjectURL(mediaStreamObj);
}
// It will play the audio
audio.onloadedmetadata = function (ev) {
// Play the audio in the 2nd audio
// element what is being recorded
audio.play();
};
// Start record
let start = document.getElementById('btnStart');
// Stop record
let stop = document.getElementById('btnStop');
// 2nd audio tag for play the audio
let playAudio = document.getElementById('adioPlay');
// This is the main thing to recorde
// the audio 'MediaRecorder' API
let mediaRecorder = new MediaRecorder(mediaStreamObj);
// Pass the audio stream
// Start event
start.addEventListener('click', function (ev) {
mediaRecorder.start();
// console.log(mediaRecorder.state);
})
// Stop event
stop.addEventListener('click', function (ev) {
mediaRecorder.stop();
// console.log(mediaRecorder.state);
});
// If audio data available then push
// it to the chunk array
mediaRecorder.ondataavailable = function (ev) {
dataArray.push(ev.data);
}
// Chunk array to store the audio data
let dataArray = [];
// Convert the audio data in to blob
// after stopping the recording
mediaRecorder.onstop = function (ev) {
// blob of type mp3
let audioData = new Blob(dataArray,
{ 'type': 'audio/mp3;' });
// After fill up the chunk
// array make it empty
dataArray = [];
// Creating audio url with reference
// of created blob named 'audioData'
let audioSrc = window.URL
.createObjectURL(audioData);
// Pass the audio url to the 2nd video tag
playAudio.src = audioSrc;
}
})
// If any error occurs then handles the error
.catch(function (err) {
console.log(err.name, err.message);
});
</script>
</head>
<body style="background-color:rgb(101, 185, 17); ">
<header>
<h1>Record and Play Audio in JavaScript</h1>
</header>
<!--button for 'start recording'-->
<p>
<button id="btnStart">START RECORDING</button>
<button id="btnStop">STOP RECORDING</button>
<!--button for 'stop recording'-->
</p>
<!--for record-->
<audio controls></audio>
<!--'controls' use for add
play, pause, and volume-->
<!--for play the audio-->
<audio id="adioPlay" controls></audio>
</body>
</html>