2017-11-09 14 views
0

iOSで複数のオーディオファイルを同時に再生したい。Safariで複数のオーディオファイルを一度に再生

ボタンをクリックすると、オーディオファイルのインスタンスが複数作成され、配列に格納されます。

possibleAudiosToPlay.forEach(el => { 
    el.currentTime = 0; 
    el.play(); 
}); 

これは、すべてのオーディオファイルを再生しながら::新しいものは、それは古いものを停止し始めるとき、私はそれらすべてをプレイしばらく

let audio = new Audio('path.wav') 
audio.play().then(() => { 
    audio.pause(); 
    possibleAudiosToPlay.push(audio); 
}); 

。 (iOSの)

リンゴの開発者ガイドは、これはHTML5オーディオとは全く不可能です言う:複数の同時オーディオストリームを再生する

もサポートされていません。

これはWeb Audio APIで実現できますか? Applesの開発者ガイドには何も書かれていません。

答えて

0

はい可能です。Web Audio APIです。オーディオソースごとにAudioBufferSourceNodeを作成する必要があります。これは、各ソースを1回しか再生できないためです(再生をやり直すことはできません)。

const AudioContext = window.AudioContext || window.webkitAudioContext; 
const ctx = new AudioContext(); 
const audioPaths = [ 
    "path/to/audio_file1.wav", 
    "path/to/audio_file2.wav", 
    "path/to/audio_file3.wav" 
]; 
let promises = []; 


// utility function to load an audio file and resolve it as a decoded audio buffer 
function getBuffer(url, audioCtx) { 
    return new Promise((resolve, reject) => { 
     if (!url) { 
      reject("Missing url!"); 
      return; 
     } 

     if (!audioCtx) { 
      reject("Missing audio context!"); 
      return; 
     } 

     let xhr = new XMLHttpRequest(); 
     xhr.open("GET", url); 
     xhr.responseType = "arraybuffer"; 

     xhr.onload = function() { 
      let arrayBuffer = xhr.response; 
      audioCtx.decodeAudioData(arrayBuffer, decodedBuffer => { 
       resolve(decodedBuffer); 
      }); 
     }; 

     xhr.onerror = function() { 
      reject("An error occurred."); 
     }; 

     xhr.send(); 
    }); 
} 


audioPaths.forEach(p => { 
    promises.push(getBuffer(p, ctx)); 
}); 


// Once all your sounds are loaded, create an AudioBufferSource for each one and start sound 
Promise.all(promises).then(buffers => { 
    buffers.forEach(b => { 
     let source = ctx.createBufferSource(); 
     source.buffer = b; 
     source.connect(ctx.destination); 
     source.start(); 
    }) 
}); 
関連する問題