Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pause recording #23

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
.DS_Store
node_modules

/.idea
122 changes: 88 additions & 34 deletions dist/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15868,22 +15868,101 @@ var MicRecorder = function () {
_this.lameEncoder.encode(event.inputBuffer.getChannelData(0));
};

// Begin retrieving microphone data.
this.microphone.connect(this.processor);
this.processor.connect(this.context.destination);
this.connectMicrophone();
}
}, {
key: 'stop',
key: 'initialize',


/**
* Requests access to the microphone and starts recording
* @return Promise
*/
value: function initialize() {
var _this2 = this;

var AudioContext = window.AudioContext || window.webkitAudioContext;
this.context = new AudioContext();
this.config.sampleRate = this.context.sampleRate;
this.lameEncoder = new Encoder(this.config);

var audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;

return new Promise(function (resolve, reject) {
navigator.mediaDevices.getUserMedia({ audio: audio }).then(function (stream) {
_this2.addMicrophoneListener(stream);
resolve(stream);
}).catch(function (err) {
reject(err);
});
});
}
}, {
key: 'start',


/**
* Initializes or resumes recording
* @return Promise
*/
value: function start() {
if (!this.processor || !this.microphone) {
return this.initialize();
} else {
this.connectMicrophone();
return Promise.resolve();
}
}

/**
* Pause recording
* @return Promise
*/

}, {
key: 'pause',
value: function pause() {
this.disconnectMicrophone();
return Promise.resolve();
}
}, {
key: 'connectMicrophone',


/**
* Start retrieving microphone data
*/
value: function connectMicrophone() {
if (this.processor && this.microphone) {
this.microphone.connect(this.processor);
this.processor.connect(this.context.destination);
}
}

/**
* Stop retrieving microphone data
*/

}, {
key: 'disconnectMicrophone',
value: function disconnectMicrophone() {
if (this.processor && this.microphone) {
this.microphone.disconnect();
this.processor.disconnect();
}
}

/**
* Disconnect microphone, processor and remove activeStream
* @return MicRecorder
*/

}, {
key: 'stop',
value: function stop() {
if (this.processor && this.microphone) {
// Clean up the Web Audio API resources.
this.microphone.disconnect();
this.processor.disconnect();
this.disconnectMicrophone();

// If all references using this.context are destroyed, context is closed
// automatically. DOMException is fired when trying to close again
Expand All @@ -15897,44 +15976,19 @@ var MicRecorder = function () {
this.activeStream.getAudioTracks().forEach(function (track) {
return track.stop();
});
this.processor = null;
this.microphone = null;
}

return this;
}
}, {
key: 'start',


/**
* Requests access to the microphone and start recording
* @return Promise
*/
value: function start() {
var _this2 = this;

var AudioContext = window.AudioContext || window.webkitAudioContext;
this.context = new AudioContext();
this.config.sampleRate = this.context.sampleRate;
this.lameEncoder = new Encoder(this.config);

var audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;

return new Promise(function (resolve, reject) {
navigator.mediaDevices.getUserMedia({ audio: audio }).then(function (stream) {
_this2.addMicrophoneListener(stream);
resolve(stream);
}).catch(function (err) {
reject(err);
});
});
}
}, {
key: 'getMp3',


/**
* Return Mp3 Buffer and Blob with type mp3
* @return {Promise}
* @return Promise
*/
value: function getMp3() {
var _this3 = this;
Expand Down
2 changes: 1 addition & 1 deletion dist/index.js.map

Large diffs are not rendered by default.

51 changes: 39 additions & 12 deletions samples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ <h1>Mic Recorder to Mp3 Example</h1>

<hr />

<button class="btn btn-primary">Start recording</button>
<button id="start-pause" class="btn btn-primary"></button>
<button id="stop" class="btn btn-danger" disabled></button>

<br />
<br />
Expand All @@ -25,19 +26,43 @@ <h1>Mic Recorder to Mp3 Example</h1>
<!-- <script src="https://unpkg.com/mic-recorder-to-mp3"></script> -->
<script src="../dist/index.js"></script>
<script>
const button = document.querySelector('button');
const LABELS = {
START: 'Start recording',
PAUSE: 'Pause recording',
RESUME: 'Resume recording',
STOP: 'Stop recording'
};

const startPauseButton = document.getElementById('start-pause');
const stopButton = document.getElementById('stop');
const recorder = new MicRecorder({
bitRate: 128
});

button.addEventListener('click', startRecording);
startPauseButton.textContent = LABELS.START;
stopButton.textContent = LABELS.STOP;

startPauseButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

function startRecording() {
recorder.start().then(() => {
button.textContent = 'Stop recording';
button.classList.toggle('btn-danger');
button.removeEventListener('click', startRecording);
button.addEventListener('click', stopRecording);
startPauseButton.textContent = LABELS.PAUSE;
startPauseButton.classList.add('btn-info');
stopButton.disabled = false;
startPauseButton.removeEventListener('click', startRecording);
startPauseButton.addEventListener('click', pauseRecording);
}).catch((e) => {
console.error(e);
});
}

function pauseRecording() {
recorder.pause().then(() => {
startPauseButton.textContent = LABELS.RESUME;
startPauseButton.classList.remove('btn-info');
startPauseButton.removeEventListener('click', pauseRecording);
startPauseButton.addEventListener('click', startRecording);
}).catch((e) => {
console.error(e);
});
Expand All @@ -46,6 +71,7 @@ <h1>Mic Recorder to Mp3 Example</h1>
function stopRecording() {
recorder.stop().getMp3().then(([buffer, blob]) => {
console.log(buffer, blob);
stopButton.disabled = true;
const file = new File(buffer, 'music.mp3', {
type: blob.type,
lastModified: Date.now()
Expand All @@ -57,14 +83,15 @@ <h1>Mic Recorder to Mp3 Example</h1>
li.appendChild(player);
document.querySelector('#playlist').appendChild(li);

button.textContent = 'Start recording';
button.classList.toggle('btn-danger');
button.removeEventListener('click', stopRecording);
button.addEventListener('click', startRecording);
startPauseButton.textContent = LABELS.START;
startPauseButton.classList.remove('btn-info');
startPauseButton.removeEventListener('click', startRecording);
startPauseButton.removeEventListener('click', pauseRecording);
startPauseButton.addEventListener('click', startRecording);
}).catch((e) => {
console.error(e);
});
}
</script>
</body>
</html>
</html>
102 changes: 72 additions & 30 deletions src/mic-recorder.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,82 @@ class MicRecorder {
this.lameEncoder.encode(event.inputBuffer.getChannelData(0));
};

// Begin retrieving microphone data.
this.microphone.connect(this.processor);
this.processor.connect(this.context.destination);
this.connectMicrophone();
};

/**
* Requests access to the microphone and starts recording
* @return Promise
*/
initialize() {
const AudioContext = window.AudioContext || window.webkitAudioContext;
this.context = new AudioContext();
this.config.sampleRate = this.context.sampleRate;
this.lameEncoder = new Encoder(this.config);

const audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;

return new Promise((resolve, reject) => {
navigator.mediaDevices.getUserMedia({ audio })
.then(stream => {
this.addMicrophoneListener(stream);
resolve(stream);
}).catch(function(err) {
reject(err);
});
})
};

/**
* Initializes or resumes recording
* @return Promise
*/
start() {
if (!this.processor || !this.microphone) {
return this.initialize();
} else {
this.connectMicrophone();
return Promise.resolve();
}
}

/**
* Pause recording
* @return Promise
*/
pause() {
this.disconnectMicrophone();
return Promise.resolve();
};

/**
* Start retrieving microphone data
*/
connectMicrophone() {
if (this.processor && this.microphone) {
this.microphone.connect(this.processor);
this.processor.connect(this.context.destination);
}
}

/**
* Stop retrieving microphone data
*/
disconnectMicrophone() {
if (this.processor && this.microphone) {
this.microphone.disconnect();
this.processor.disconnect();
}
}

/**
* Disconnect microphone, processor and remove activeStream
* @return MicRecorder
*/
stop() {
if (this.processor && this.microphone) {
// Clean up the Web Audio API resources.
this.microphone.disconnect();
this.processor.disconnect();
this.disconnectMicrophone();

// If all references using this.context are destroyed, context is closed
// automatically. DOMException is fired when trying to close again
Expand All @@ -76,37 +139,16 @@ class MicRecorder {

// Stop all audio tracks. Also, removes recording icon from chrome tab
this.activeStream.getAudioTracks().forEach(track => track.stop());
this.processor = null;
this.microphone = null;
}

return this;
};

/**
* Requests access to the microphone and start recording
* @return Promise
*/
start() {
const AudioContext = window.AudioContext || window.webkitAudioContext;
this.context = new AudioContext();
this.config.sampleRate = this.context.sampleRate;
this.lameEncoder = new Encoder(this.config);

const audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;

return new Promise((resolve, reject) => {
navigator.mediaDevices.getUserMedia({ audio })
.then(stream => {
this.addMicrophoneListener(stream);
resolve(stream);
}).catch(function(err) {
reject(err);
});
})
};

/**
* Return Mp3 Buffer and Blob with type mp3
* @return {Promise}
* @return Promise
*/
getMp3() {
const finalBuffer = this.lameEncoder.finish();
Expand All @@ -120,6 +162,6 @@ class MicRecorder {
}
});
};
};
}

export default MicRecorder;