Audio Api Solutions

[IOriens]

Issues to crack down

• Quick response (you can't preload sound in iOS on your mobile phone)
• Play multiple sounds at once (with <audio/> tag, you can't do this on iOS )
• You can't play audio after Promise on early version's iOS system like iOS 9 (also in Vue's watch)

Play audio with Audiocontext using Base64 URI (without xhr and no cors issue)

function base64ToArrayBuffer(base64) {
  var binaryString =  window.atob(base64);
  var len = binaryString.length;
  var bytes = new Uint8Array( len );
  for (var i = 0; i < len; i++)        {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

var base64 = '<data string retrieved from server>';
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var source = audioContext.createBufferSource();
audioContext.decodeAudioData(base64ToArrayBuffer(base64), function(buffer) {
   source.buffer = buffer;
   source.connect(audioContext.destination);
   source.start(0);
});

Play audio with Audiocontext using xhr (has cors issue)

Use lowLag.js

Create audio context with audioTag

window.audiotag = document.getElementsByTagName('audio')[0];
function audioReady() {
    window.AudioContext = window.AudioContext||window.webkitAudioContext;
    context = new AudioContext();
    source = context.createMediaElementSource(audiotag);
    source.connect(context.destination);
    audiotag.play();
}
audiotag.onload = audioReady();

Base64 as Audio source

Demo

<button onclick="beeb.play()">Play</button>

window.beeb = new Audio('data:audio/ogg;base64,T2')

Play Audio on Vue data change in iOS 9

You may use sync watch. Vue Sync watch Demo

  watch: {
    state: {
      sync: true,
      handler(val) {
        console.info('new state', val);
      }
    }
  }

[IOriens]

Changing Speed of Audio Using the Web Audio API Without Changing Pitch

There is a way to do this - its called granular synthesis (link points to a pd theory link, but the theory is universal). The idea of granular synthesis is that a sound is sampled at the original speed, but it is played at a different speed from each sample point, however with the advantage that the pitch is not altered.