Skip to content

Commit

Permalink
audio: try to use audio-encoder instead of lamejs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Selithrarion
Selithrarion committed Apr 9, 2022
1 parent 25eee19 commit 391fd2f
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 60 deletions.
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
"@quasar/extras": "^1.0.0",
"@sentry/tracing": "^6.18.2",
"@sentry/vue": "^6.18.2",
"audio-encoder": "^1.0.4",
"axios": "^0.21.2",
"click-outside-vue3": "^4.0.1",
"core-js": "^3.6.5",
"date-fns": "^2.23.0",
"dotenv": "^10.0.0",
"lamejs": "^1.2.1",
"lodash.camelcase": "^4.3.0",
"lodash.upperfirst": "^4.3.1",
"quasar": "^2.0.0",
Expand Down
91 changes: 49 additions & 42 deletions frontend/src/components/audio/AudioEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ import AudioEditorSliderVolume from 'components/audio/AudioEditorSliderVolume.vu
import WaveSurfer from 'wavesurfer.js';
import Regions from 'wavesurfer.js/dist/plugin/wavesurfer.regions';
import { Mp3Encoder } from 'lamejs';
import audioEncoder from 'audio-encoder';
import AudioEditorSlider from 'components/audio/AudioEditorSlider.vue';
export default defineComponent({
Expand Down Expand Up @@ -157,53 +157,60 @@ export default defineComponent({
region.value = [updatedRegion.start, updatedRegion.end];
}
async function exportAudio() {
function exportAudio() {
try {
// TODO: fix err https://github.com/zhuker/lamejs/issues/86
// https://github.com/meowtec/audio-cutter/tree/master/src
// https://github.com/lubenard/simple-mp3-cutter/blob/master/src/cutter.js
// https://github.com/antoine92190/vue-advanced-chat/blob/master/src/utils/mp3-encoder.js
// https://codesandbox.io/s/bzcdr?file=/src/components/media-recorder/WebAudioUtils.js:1613-1623
// or use ffmpeg
// https://github.com/Kagami/ffmpeg.js/
// https://medium.com/jeremy-gottfrieds-tech-blog/javascript-tutorial-record-audio-and-encode-it-to-mp3-2eedcd466e78
// https://devtails.medium.com/how-to-convert-audio-from-wav-to-mp3-in-javascript-using-ffmpeg-wasm-5dcd07a11821
// https://www.google.ru/search?q=ffmpeg+vue&oq=ffmpeg+vue&sourceid=chrome&ie=UTF-8
const audioContext = new AudioContext();
const buffer = await new Response(props.rawAudio).arrayBuffer();
const decodedData = await audioContext.decodeAudioData(buffer);
console.log('decodedData', decodedData);
const mp3Encoder = new Mp3Encoder(decodedData.numberOfChannels, decodedData.sampleRate, 128);
const mp3Data: string[] = [];
console.log(mp3Encoder);
const left = new Int16Array(44100); //one second of silence (get your data from the source you have)
const right = new Int16Array(44100); //one second of silence (get your data from the source you have)
const samples = new Int16Array(44100); //one second of silence (get your data from the source you have)
const sampleBlockSize = 1152; //can be anything but make it a multiple of 576 to make encoders life easier
for (let i = 0; i < samples.length; i += sampleBlockSize) {
const leftChunk = left.subarray(i, i + sampleBlockSize);
const rightChunk = right.subarray(i, i + sampleBlockSize);
const encoded = mp3Encoder.encodeBuffer(leftChunk, rightChunk);
if (encoded.length > 0) {
mp3Data.push(encoded);
}
}
const mp3 = mp3Encoder.flush();
if (mp3.length > 0) {
mp3Data.push(mp3);
const audioContext = new AudioContext();
// const buffer = await new Response(props.rawAudio).arrayBuffer();
//
// const decodedData = await audioContext.decodeAudioData(buffer);
// console.log('decodedData', decodedData);
const length = 44100; // one second @ 44.1KHz
const audioBuffer = audioContext.createBuffer(1, length, 44100);
const channelData = audioBuffer.getChannelData(0);
// fill some audio
for (let i = 0; i < length; i++) {
channelData[i] = Math.sin(i * 0.03);
}
console.log('mp3Data', mp3Data);
// convert as mp3 and save file using file-saver
audioEncoder(audioBuffer, 128, null, (blob) => {
const url = URL.createObjectURL(blob);
console.log('MP3 URl: ', url);
});
const blob = new Blob(mp3Data, { type: 'audio/mp3' });
console.log('blob', blob);
const url = URL.createObjectURL(blob);
console.log('MP3 URl: ', url);
// const mp3Encoder = new Mp3Encoder(decodedData.numberOfChannels, decodedData.sampleRate, 128);
// const mp3Data: string[] = [];
//
// console.log(mp3Encoder);
//
// const left = new Int16Array(44100); //one second of silence (get your data from the source you have)
// const right = new Int16Array(44100); //one second of silence (get your data from the source you have)
// const samples = new Int16Array(44100); //one second of silence (get your data from the source you have)
// const sampleBlockSize = 1152; //can be anything but make it a multiple of 576 to make encoders life easier
//
// for (let i = 0; i < samples.length; i += sampleBlockSize) {
// const leftChunk = left.subarray(i, i + sampleBlockSize);
// const rightChunk = right.subarray(i, i + sampleBlockSize);
// const encoded = mp3Encoder.encodeBuffer(leftChunk, rightChunk);
// if (encoded.length > 0) {
// mp3Data.push(encoded);
// }
// }
// const mp3 = mp3Encoder.flush();
// if (mp3.length > 0) {
// mp3Data.push(mp3);
// }
//
// console.log('mp3Data', mp3Data);
//
// const blob = new Blob(mp3Data, { type: 'audio/mp3' });
// console.log('blob', blob);
// const url = URL.createObjectURL(blob);
// console.log('MP3 URl: ', url);
} catch (e) {
console.error(e);
}
Expand Down
44 changes: 28 additions & 16 deletions frontend/src/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
declare module 'lamejs' {
export class Mp3Encoder {
channels: number;
sampleRate: number;
bitrate: number;
// TODO: fix An implementation cannot be declared in ambient contexts
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
constructor(channels: number, sampleRate: number, bitrate: number) {
this.channels = channels;
this.sampleRate = sampleRate;
this.bitrate = bitrate;
}
// declare module 'lamejs' {
// export class Mp3Encoder {
// channels: number;
// sampleRate: number;
// bitrate: number;
// // TODO: fix An implementation cannot be declared in ambient contexts
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// // @ts-ignore
// constructor(channels: number, sampleRate: number, bitrate: number) {
// this.channels = channels;
// this.sampleRate = sampleRate;
// this.bitrate = bitrate;
// }
//
// encodeBuffer(left: Int16Array, right: Int16Array): string;
// flush(): string;
// }
// }

encodeBuffer(left: Int16Array, right: Int16Array): string;
flush(): string;
}
declare module 'audio-encoder' {
type progressCallback = () => void;
type completeCallback = (v: Blob) => void;
function AudioEncoder(
buffer: AudioBuffer,
bitrate: number | null,
onProgress: progressCallback | null,
onComplete: completeCallback
): void;
export = AudioEncoder;
}
9 changes: 8 additions & 1 deletion frontend/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2011,6 +2011,13 @@ at-least-node@^1.0.0:
resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==

audio-encoder@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/audio-encoder/-/audio-encoder-1.0.4.tgz#416a37a4815344277d74da23d09f660979aa3abc"
integrity sha512-B9SH/AqqyrrDtSY51QXZoDjFmLeDgBLi7yDKI4wv8w3uzIPTsj0WEnzUiKNLmEANEJygxTjtYUGYVOSVaNNhjw==
dependencies:
lamejs "1.2.1"

autoprefixer@10.4.0:
version "10.4.0"
resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz"
Expand Down Expand Up @@ -4104,7 +4111,7 @@ klona@^2.0.4, klona@^2.0.5:
resolved "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz"
integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==

lamejs@^1.2.1:
lamejs@1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/lamejs/-/lamejs-1.2.1.tgz#0f92d38729213f106d4a19ded20821da7e89c8e4"
integrity sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==
Expand Down

0 comments on commit 391fd2f

Please sign in to comment.