ホーム > カテゴリ > HTML5・JavaScript >

複数の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-combine/

ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src ="WAVE.js"></script>
<script>
var wav1;
var wav2;
 
function run() {
    
  // HTML5 Validity Check
  if (!document.getElementById("num_Hz").checkValidity()){
    return true;
  }   
      
  var bit       = parseInt(document.getElementById("lst_bit").value,10);
  var frequency = parseInt(document.getElementById("num_Hz").value,10);
  var channel   = parseInt(document.getElementById("lst_channel").value,10);
  
  var stereo; 
  if (channel == 2){
    stereo = true;
  }else{  
    stereo = false;
  }        
  
  if(!wav1 && !wav2) return false;
  
console.time("run");     
      
  try{
    
    // Convert 1
    var file = wav1.SaveToStream(bit, stereo, frequency, true);
    var st = new TWaveFormat(file);         
    
    // Convert 2
    var file = wav2.SaveToStream(bit, stereo, frequency, true);
    var en = new TWaveFormat(file);         
    
    // Raw
    var data1 = st.getData();
    var data2 = en.getData();
    
    var data = {}, tmpL = [], tmpR = [];    
    
    // L
    for(var i=0;i<data1.L.length;i++){
      tmpL.push(data1.L[i]); 
    }
    for(var i=0;i<data2.L.length;i++){
      tmpL.push(data2.L[i]); 
    }    
    
    // R
    if(data1.R.length != 0){ 
      for(var i=0;i<data1.R.length;i++){
        tmpR.push(data1.R[i]); 
      }
      for(var i=0;i<data2.R.length;i++){
        tmpR.push(data2.R[i]); 
      }    
    }
 
    data.L = tmpL;
    data.R = tmpR;
    
    // Save
    var F = wav1.WriteStream(bit, data, frequency);
    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, val) {
  var files;
  var reader = new FileReader();
  
  if(event.target.files){
    files = event.target.files;
  } 
  
  reader.onload = function (event) {
 
    try{
      
      var wav;
      if(val == "1"){
         wav1 = new TWaveFormat(new Uint8Array(reader.result));
         wav = wav1;
      }else{
         wav2 = new TWaveFormat(new Uint8Array(reader.result));
         wav = wav2;
      }     
      
      var str = 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";
      
      document.getElementById("msg"+ val).innerHTML =str;  
     
    }catch(e){
      alert(e);
      console.error(e); 
    }    
  };
  
  if (files[0]){    
    reader.readAsArrayBuffer(files[0]); 
  }
}      
</script>
 
</head>
<body>  
<h1>Combine</h1>
<p></p>
<table>
  <tr><th>File 1</th><td>&nbsp;<input type="file" id="inputfile1" accept="audio/wav" onchange="onAddFile(event, 1);"><br><span id="msg1" style="font-size:12px;color:green;"></span></td></tr>
  <tr><th>File 2</th><td>&nbsp;<input type="file" id="inputfile2" accept="audio/wav" onchange="onAddFile(event, 2);"><br><span id="msg2" style="font-size:12px;color:green;"></span></td></tr>
</table>    
<p></p> 
<form>
 <table>
   <tr><th>Bit</th>
       <td><select id="lst_bit">
                 <option value="8">unsigned 8-bit [PCM]</option>
                 <option value="16" selected="selected">Signed 16-bit [PCM]</option>
                 <option value="24">Signed 24-bit [PCM]</option>
                 <option value="32">Signed 32-bit [PCM]</option>
               </select></td></tr>
  <tr><th>Frequency</th>
      <td><input type="number" id="num_Hz" style="width:70px;text-align:right;" min="1" max="999999" value ="48000" required> 
               <select onchange="document.getElementById('num_Hz').value = this.value">
                 <option value="8000">8000</option>
                 <option value="11025">11025</option>
                 <option value="16000">16000</option>
                 <option value="22050">22050</option>
                 <option value="32000">32000</option>
                 <option value="44100">44100</option>
                 <option value="48000" selected="selected">48000</option>
                 <option value="88200">88200</option>
                 <option value="96000">96000</option>
                 <option value="176400">176400</option>
                 <option value="192000">192000</option>
                 <option value="352800">352800</option>
                 <option value="384000">384000</option>
               </select> Hz</td></tr>
   <tr><th>Channel</th>
       <td><select id="lst_channel">
                 <option value="2" selected="selected">Stereo (2 Channel)</option>
                 <option value="1">Mono (1 Channel)</option>
               </select></td></tr>                        
 </table>
<p></p> 
<input type="submit" onclick="return run();" value="R U N">
</form>
</body>
</html>





関連記事


前の記事：Waveファイルの音声を切り取る [WAVE.js]
次の記事：MP3/OGG/AAC/FLACファイルをWaveファイルに変換する [WAVE.js]

公開日：2019年03月05日
記事NO：02740


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)