play - Audio distorsionado en iOS 7.1 con la API de WebAudio

web audio api examples

Question

En iOS 7.1, sigo obteniendo un sonido de zumbido / ruidos / distorsión cuando reproduzco audio usando Web Audio API. Suena distorsionado así , en lugar de normal como este .

Los mismos archivos están bien cuando se usa audio HTML5. Todo funciona bien en el escritorio (Firefox, Chrome, Safari).

EDITAR:

• El audio está distorsionado en las versiones iOS 7.1, iOS 7.1, 8.1, 8.2. El zumbido suena a menudo incluso antes de reproducir nada.
• El audio está distorsionado en un iPhone físico con iOS 7.1, tanto en Chrome como en Safari.
• El audio está bien en un iPhone físico con iOS 8.1, tanto en Chrome como en Safari.

es decir: el zumbido de audio está en iOS 7.1. solamente.

Howler.js no es el problema. El problema sigue ahí usando JS puro como ese:

var context;
var sound;
var extension = ''.'' + ( new Audio().canPlayType( ''audio/ogg'' ) !== '''' ? ''ogg'' : ''mp3'');
/** Test for WebAudio API support **/
try {
// still needed for Safari
window.AudioContext = window.AudioContext || window.webkitAudioContext;
// create an AudioContext
context = new AudioContext();
} catch(e) {
// API not supported
throw new Error( ''Web Audio API not supported.'' );
}
function loadSound( url ) {
var request = new XMLHttpRequest();
request.open( ''GET'', url, true );
request.responseType = ''arraybuffer'';
request.onload = function() {
// request.response is encoded... so decode it now
context.decodeAudioData( request.response, function( buffer ) {
sound = buffer;
}, function( err ) {
throw new Error( err );
});
}
request.send();
}
function playSound(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
}
loadSound( ''/tests/Assets/Audio/En-us-hello'' + extension );
$(document).ready(function(){
$( ''#clickme'' ).click( function( event ) {
playSound(sound);
});
}); /* END .ready() */

Una versión en vivo de este código está disponible aquí: Web Audio API - Hello world

Google no mencionó ningún resultado sobre un problema de sonido tan distorsionado en iOS 7.1.

¿Alguien más se ha topado con eso? ¿Debo presentar un informe de error a Apple?

Answer 1

Creo que el problema se debe a que restablece el audioContext.sampleRate prop, que parece suceder después de que el navegador / sistema operativo reproduce algo grabado en una velocidad de muestreo diferente.

He ideado la siguiente solución, que básicamente reproduce silenciosamente un archivo wav corto grabado en la frecuencia de muestreo en la que el dispositivo hace la reproducción actualmente:

"use strict";
var getData = function( context, filePath, callback ) {
var source = context.createBufferSource(),
request = new XMLHttpRequest();
request.open( "GET", filePath, true );
request.responseType = "arraybuffer";
request.onload = function() {
var audioData = request.response;
context.decodeAudioData(
audioData,
function( buffer ) {
source.buffer = buffer;
callback( source );
},
function( e ) {
console.log( "Error with decoding audio data" + e.err );
}
);
};
request.send();
};
module.exports = function() {
var AudioContext = window.AudioContext || window.webkitAudioContext,
context = new AudioContext();
getData(
context,
"path/to/short/file.wav",
function( bufferSource ) {
var gain = context.createGain();
gain.gain.value = 0;
bufferSource.connect( gain );
gain.connect( context.destination );
bufferSource.start( 0 );
}
);
};

Obviamente, si algunos de los dispositivos tienen tasas de muestreo diferentes, necesitaría detectar y usar un archivo específico para cada velocidad.

Answer 2

parece que iOS6 + Safari tiene una frecuencia de muestreo predeterminada de 48000. Si escribe esto en la consola de desarrollador cuando abre Safari móvil por primera vez, obtendrá 48000:

var ctx = new window.webkitAudioContext();
console.log(ctx.sampleRate);

Referencia adicional: https://forums.developer.apple.com/thread/20677

Luego, si cierra el contexto inicial en la carga: ctx.close() , el siguiente contexto creado utilizará la frecuencia de muestreo que usan la mayoría de los otros navegadores (44100) y el sonido se reproducirá sin distorsión.

Aclare esto por apuntarme en la dirección correcta (y en caso de que lo anterior ya no funcione en el futuro): https://github.com/Jam3/ios-safe-audio-context/blob/master/index.js

función a partir de la fecha de publicación:

function createAudioContext (desiredSampleRate) {
var AudioCtor = window.AudioContext || window.webkitAudioContext
desiredSampleRate = typeof desiredSampleRate === ''number''
? desiredSampleRate
: 44100
var context = new AudioCtor()
// Check if hack is necessary. Only occurs in iOS6+ devices
// and only when you first boot the iPhone, or play a audio/video
// with a different sample rate
if (/(iPhone|iPad)/i.test(navigator.userAgent) &&
context.sampleRate !== desiredSampleRate) {
var buffer = context.createBuffer(1, 1, desiredSampleRate)
var dummy = context.createBufferSource()
dummy.buffer = buffer
dummy.connect(context.destination)
dummy.start(0)
dummy.disconnect()
context.close() // dispose old context
context = new AudioCtor()
}
return context
}