Waveファイルをフェードイン [WAVE.js]
WAVE.jsを使用して「Waveファイル」(*.wav)に音が徐々に大きくなる「フェードイン効果」を与えます。WAVE.jsはオープンソースなのでどなたでもご利用可能です。
WAVE.js
https://github.com/TakeshiOkamoto/WAVE.js
DEMO (Japanese)
https://www.petitmonte.com/labo/wave-fade-in/
ソースコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src ="WAVE.js"></script> <script> var wav; function onDragOver(event){ event.preventDefault(); } function onDrop(event){ onAddFile(event); event.preventDefault(); } function run() { if(!wav) return false; console.time("run"); try{ // Raw var data = wav.getData(); var tmpL = [], tmpR = []; // L for(var i=0; i<data.L.length;i++){ data.L[i] = Math.round(data.L[i] * ((i+1)/data.L.length)); } // R if(data.R.length != 0){ for(var i=0; i<data.R.length;i++){ data.R[i] = Math.round(data.R[i] * ((i+1)/data.R.length)); } } // Save var F = wav.WriteStream(wav.Analyst.WaveFomat.wBitsPerSample, data, wav.Analyst.WaveFomat.nSamplesPerSec); F.SaveToFile("test.wav","audio/wav"); }catch(e){ alert("Could not acquire waveform data. (unsupported format)"); console.error(e); } console.timeEnd("run"); return false; } function onAddFile(event) { var files; var reader = new FileReader(); if(event.target.files){ files = event.target.files; }else{ files = event.dataTransfer.files; } reader.onload = function (event) { try{ wav = new TWaveFormat(new Uint8Array(reader.result)); var str = "File loaded : " + wav.Analyst.WaveFomat.wBitsPerSample + "bit "; str += wav.Analyst.WaveFomat.nSamplesPerSec + "Hz "; if(wav.Analyst.WaveFomat.nChannels == 1){ str += " Mono "; }else{ str += " Stereo "; } str += Math.round(wav.Analyst.time)/1000 + "s(" + wav.Analyst.time + "ms)"; document.getElementById("msg").innerHTML =str; }catch(e){ alert(e); console.error(e); } }; if (files[0]){ reader.readAsArrayBuffer(files[0]); document.getElementById("inputfile").value = ""; } } </script> </head> <body ondrop="onDrop(event);" ondragover="onDragOver(event);"> <h1>Fade in</h1> <p></p> <table> <tr><th>Wave File</th><td> <input type="file" id="inputfile" accept="audio/wav" onchange="onAddFile(event);"></td></tr> </table> <p id="msg" style="font-size:12px;color:green;"> </p> <input type="submit" onclick="return run();" value=" R U N "> </body> </html>
スポンサーリンク
関連記事
公開日:2019年03月05日
記事NO:02737