iOS 7.1中使用WebAudio API

时间:2015-04-27 16:48:52

标签: ios audio mobile-safari web-audio

在iOS 7.1上,当使用Web Audio API播放音频时,我不断收到嗡嗡声/嘈杂/失真的声音。它听起来是distorted like this,而不是normal like this

使用HTML5音频时,相同的文件也没问题。这一切都可以在桌面上运行(Firefox,Chrome,Safari。)

编辑:

  • iOS模拟器版本iOS 7.1,8.1,8.2中的音频失真。在我甚至播放任何内容之前,嗡嗡的声音通常会开始。
  • 在Chrome和Safari中运行iOS 7.1的物理iPhone上的音频失真。
  • 在Chrome和Safari中运行iOS 8.1的物理iPhone上的音频都很好。

即:嘈杂的音频在iOS 7.1上。只要。


Howler.js不是问题。问题依然存在于纯粹的JS中:

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() */

此代码的实时版本可在此处获取:Web Audio API - Hello world


谷歌没有提出有关iOS 7.1上这种扭曲声音问题的任何结果。

还有其他人遇到过吗?我应该向Apple提交错误报告吗?

2 个答案:

答案 0 :(得分:4)

我认为这个问题是由于重置audioContext.sampleRate道具造成的,这似乎是在浏览器/操作系统播放以不同采样率录制的内容后发生的。

我已经设计了以下解决方法,它基本上默默地​​播放以设备当前播放的采样率记录的短wav文件:

"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 );
        }
    );
};

显然,如果某些设备具有不同的采样率,则需要针对每个速率检测并使用特定文件。

答案 1 :(得分:3)

看起来iOS6 + Safari的默认采样率为48000.如果您在首次打开移动Safari时将其输入开发者控制台,则会获得48000:

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

进一步参考:https://forums.developer.apple.com/thread/20677

然后,如果你关闭加载的初始上下文:ctx.close(),下一个创建的上下文将使用大多数其他浏览器使用的采样率(44100),声音将播放而不失真。

相信这是因为我指出了正确的方向(如果以上不再适用):https://github.com/Jam3/ios-safe-audio-context/blob/master/index.js

截止日期后的功能:

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
}