forked: JavaScript Wav to MP3 Test

Readme
JavaScript 156 lines
HTML 23 lines
CSS 49 lines

forked: JavaScript Wav to MP3 Test

Convert wav to mp3
    ** forked: JavaScript Convert Wav to MP3(LAME) Test **

***********************************************************************************************************/
//    elements
var wavPlay = document.getElementById('wav-play');
var wavData = document.getElementById('wav-data');
var mp3Play = document.getElementById('mp3-play');
var mp3Data = document.getElementById('mp3-data');
//    file readers
var wav = new FileReader();
var mp3 = new FileReader();
//    worker
var encoderWorker = new Worker('/assets/w/c/X/o/wcXow');
/*

functions

*/
function encode64(buffer) {
    var binary = '',
        bytes = new Uint8Array( buffer ),
        len = bytes.byteLength;

for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

function parseWav(wav) {
    function readInt(i, bytes) {
        var ret = 0,
            shft = 0;

while (bytes) {
            ret += wav[i] << shft;
            shft += 8;
            i++;
            bytes--;
        }
        return ret;
    }
    if (readInt(20, 2) != 1) throw 'Invalid compression code, not PCM';
    if (readInt(22, 2) != 1) throw 'Invalid number of channels, not 1';
    return {
        sampleRate: readInt(24, 4),
        bitsPerSample: readInt(34, 2),
        samples: wav.subarray(44)
    };
}

function Uint8ArrayToFloat32Array(u8a){
    var f32Buffer = new Float32Array(u8a.length);
    for (var i = 0; i < u8a.length; i++) {
        var value = u8a[i<<1] + (u8a[(i<<1)+1]<<8);
        if (value >= 0x8000) value |= ~0x7FFF;
        f32Buffer[i] = value / 0x8000;
    }
    return f32Buffer;
}
/*

select file

*/
var lastModifiedDate = function(f) {
    return (( f.hasOwnProperty("lastModifiedDate") )? f.lastModifiedDate : (new Date(f.lastModified)));
};
document.getElementById('file').onchange = function(e) {
    var f = e.target.files[0];
    var o = [
        "name: " + encodeURIComponent(f.name),
        "type: " + f.type || "n/a",
        "size: " + f.size + " bytes",
        "last modified: " + lastModifiedDate(f).toLocaleString()
    ];
    o = "<li>" + o.join('</li><li>') + "</li>";
    document.getElementById('info').innerHTML = o;
    //    wav
    wavPlay.setAttribute("disabled", "disabled");
    wavData.innerHTML = 'Read...';
    wav.readAsDataURL(f);
    //    mp3
    mp3Play.setAttribute("disabled", "disabled");
    mp3Data.innerHTML = 'Read...';
    mp3.readAsArrayBuffer(f);
};
/*

wav file reader

*/
wav.onload = function(e) {
    wavData.innerHTML = this.result;
    wavPlay.removeAttribute("disabled");
};
/*

convert wav to mp3

*/
mp3.onload = function(e) {
    mp3Data.innerHTML = 'Converting...';
    var buffer = new Uint8Array(this.result);
    var data = parseWav(buffer);   
    encoderWorker.postMessage({
        cmd: 'init',
        config:{
            mode : 3,
            channels:1,
            samplerate: data.sampleRate,
            bitlate: data.bitsPerSample
        }
    });   
    encoderWorker.postMessage({ cmd: 'encode', buf: Uint8ArrayToFloat32Array(data.samples) });
    encoderWorker.postMessage({ cmd: 'finish'});
    encoderWorker.onmessage = function(e) {
        if (e.data.cmd == 'data') {
            mp3Data.innerHTML = 'data:audio/mp3;base64,'+encode64(e.data.buf);
            mp3Play.removeAttribute("disabled");
        }
    };
};
/*

play

*/
wavPlay.onclick = function(e) {
    (new Audio(wavData.innerHTML)).play();
};
mp3Play.onclick = function(e) {
    (new Audio(mp3Data.innerHTML)).play();
};

forked: JavaScript Wav to MP3 Test

// forked from Masashi.Yoshikawa's "JavaScript Wav to MP3 Test" http://jsdo.it/Masashi.Yoshikawa/wav2mp3byJS /*********************************************************************************************************** Convert wav to mp3 ** forked: JavaScript Convert Wav to MP3(LAME) Test ** ***********************************************************************************************************/ // elements var wavPlay = document.getElementById('wav-play'); var wavData = document.getElementById('wav-data'); var mp3Play = document.getElementById('mp3-play'); var mp3Data = document.getElementById('mp3-data'); // file readers var wav = new FileReader(); var mp3 = new FileReader(); // worker var encoderWorker = new Worker('/assets/w/c/X/o/wcXow'); /* functions */ function encode64(buffer) { var binary = '', bytes = new Uint8Array( buffer ), len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode( bytes[ i ] ); } return window.btoa( binary ); } function parseWav(wav) { function readInt(i, bytes) { var ret = 0, shft = 0; while (bytes) { ret += wav[i] << shft; shft += 8; i++; bytes--; } return ret; } if (readInt(20, 2) != 1) throw 'Invalid compression code, not PCM'; if (readInt(22, 2) != 1) throw 'Invalid number of channels, not 1'; return { sampleRate: readInt(24, 4), bitsPerSample: readInt(34, 2), samples: wav.subarray(44) }; } function Uint8ArrayToFloat32Array(u8a){ var f32Buffer = new Float32Array(u8a.length); for (var i = 0; i < u8a.length; i++) { var value = u8a[i<<1] + (u8a[(i<<1)+1]<<8); if (value >= 0x8000) value |= ~0x7FFF; f32Buffer[i] = value / 0x8000; } return f32Buffer; } /* select file */ var lastModifiedDate = function(f) { return (( f.hasOwnProperty("lastModifiedDate") )? f.lastModifiedDate : (new Date(f.lastModified))); }; document.getElementById('file').onchange = function(e) { var f = e.target.files[0]; var o = [ "name: " + encodeURIComponent(f.name), "type: " + f.type || "n/a", "size: " + f.size + " bytes", "last modified: " + lastModifiedDate(f).toLocaleString() ]; o = "<li>" + o.join('</li><li>') + "</li>"; document.getElementById('info').innerHTML = o; // wav wavPlay.setAttribute("disabled", "disabled"); wavData.innerHTML = 'Read...'; wav.readAsDataURL(f); // mp3 mp3Play.setAttribute("disabled", "disabled"); mp3Data.innerHTML = 'Read...'; mp3.readAsArrayBuffer(f); }; /* wav file reader */ wav.onload = function(e) { wavData.innerHTML = this.result; wavPlay.removeAttribute("disabled"); }; /* convert wav to mp3 */ mp3.onload = function(e) { mp3Data.innerHTML = 'Converting...'; var buffer = new Uint8Array(this.result); var data = parseWav(buffer); encoderWorker.postMessage({ cmd: 'init', config:{ mode : 3, channels:1, samplerate: data.sampleRate, bitlate: data.bitsPerSample } }); encoderWorker.postMessage({ cmd: 'encode', buf: Uint8ArrayToFloat32Array(data.samples) }); encoderWorker.postMessage({ cmd: 'finish'}); encoderWorker.onmessage = function(e) { if (e.data.cmd == 'data') { mp3Data.innerHTML = 'data:audio/mp3;base64,'+encode64(e.data.buf); mp3Play.removeAttribute("disabled"); } }; }; /* play */ wavPlay.onclick = function(e) { (new Audio(wavData.innerHTML)).play(); }; mp3Play.onclick = function(e) { (new Audio(mp3Data.innerHTML)).play(); }; <header> <h1>forked: JavaScript Convert Wav to MP3(LAME) Test</h1> </header> <div id="main"> <section id="source"> <h3>Source File</h3> <p> <div><input type="file" accept="audio/*wav" id="file" name="file"></div> <ul id="info"></ul> </p> </section> <section id="wav"> <h3>wav <button id="wav-play" disabled>play</button></h3> <p id="wav-data" class="data"></p> </section> <section id="mp3"> <h3>mp3 <button id="mp3-play" disabled>play</button></h3> <p id="mp3-data" class="data"></p> </section> </div> <footer> <p>This program uses <a href="https://github.com/akrennmair/libmp3lame-js" target="_blank">libmp3lame.js</a>.</p> </footer>* { margin: 0; padding: 0; border: 0; } body { background: #fff; font: 15px sans-serif; color: #fff; background-color: #000; } a { color: inherit; text-decoration: none; } a:hover { color: #88f; text-decoration: underline; } ul { list-style-position: inside; } footer { text-align: center; font-family: serif; } #main { padding: 2em; color: #333; background: #fff; } button { padding: 0.3em 0.5em; background-color: #fff; border: solid 1px #888; border-radius: 3px; box-shadow: 1px 1px 2px 0 #ccc; } section { margin-bottom: 1em; } section > p { margin: 0.5em 1em; } section > .data { padding: 0.5em; word-wrap: break-word; white-space: normal; font-family: serif; background-color: #cfcfcf; border-radius: 3px; }