Forked from: Masashi.Yoshikawa's JavaScript Wav to MP3 Test View Diff (195) forked: JavaScript Wav to MP3 Test yasu0519 Follow 2017-01-09 23:04:21 License: MIT License Fork0 Fav0 View786 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 156 lines HTML 23 lines CSS 49 lines 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> forked: JavaScript Wav to MP3 Test * { 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; } // 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author yasu0519 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/yhDl/js"></script> emscripten filereadapi html5_elements&api javascript libmp3lame library&test Discussion Questions on this code? Tags emscripten filereadapi html5_elements&api javascript libmp3lame library&test