roparz / Recordmp3js

Record MP3 files directly from the browser using JS and HTML
MIT License
9 stars 2 forks source link

Can the processes be separated? #2

Open iGitK72 opened 10 years ago

iGitK72 commented 10 years ago

I left this on the original repo and then saw how you have done the mp3 encoding without the wav. I am wondering if this can be separated even more such that the encode is not fired right after "stop_recording"? Haven't had time to look into this yet, but hopefully someone brighter than I has an easy way to implement this. Trying to change the flow of this so that I can choose the mp3 that I want to be uploaded to the server. Currently, I record then wav and mp3 is created and then mp3 is uploaded to the server. I only want to do the mp3 upload to the server on another button click or other event, not automatically as part of this process.

Any ideas/suggestions how to do that? I was thinking to make this two processes where one lib only has the wav encoding processes so that it works just as the basic original recorder works and then another lib with the mp3 and upload processes and then just change all the names to something unique so I can call them separately, but this is more of a hack then a solution and I am not even sure it would work since I need to get the audio blob from somewhere.

roparz commented 9 years ago

Let's sum up. You want to make multiple records and then upload only one of them. Am I right?

Here is my solution:

Comment the line 54 in recordmp3.js:

worker.onmessage = function(e){
  ...
  //uploadAudio(blob, mp3Name);
  currCallback(blob, mp3Name);
}

Now go to currCallback function (line 57 in index.html). You can see that the audio player use the blob as src, so the file can be played without being uploaded. blob can be used later for the upload. Copy/paste uploadAudio function from recordmp3.js to index.html. Finally, create a button next to the audio player:

...
var hf = document.createElement('a');
var btn = document.createElement('button');
btn.innerText = 'Upload';
btn.addEventListener('click', function(e) {
  uploadAudio(blob, mp3Name);
}, false);
...
li.appendChild(hf);
li.appendChild(btn);

I didn't test it but here is the idea. Tell me if this is what you want.