Воспроизведение осциллятора в левом/правом канале с помощью Web Audio Api, Ionic и Crosswalk

Я хочу воспроизвести осциллятор в левом, правом или обоих каналах, и для этого я использую StereoPannerNode из Web Audio Api. Когда я запускаю «ionic serve» в Chrome, все работает нормально, но когда я тестирую код на Android (я установил плагин crosswalk), звук исходит из обоих каналов (ниже в канале я не хочу, чтобы звук воспроизводился).

Я также пробовал узлы слияния и разделения с теми же результатами: работает на Chrome, не работает на Android.

Пробовал использовать Asus ZenFone с Android 4.4.2 и Huawei p8 с Android 6.0.

Вот как я создаю свой аудиоконтекст и узел панорамирования.

var contextClass = (window.AudioContext);
var audioCtx = new contextClass();
var panNode = audioCtx.createStereoPanner();

Я не знаю, как это исправить, есть идеи?


cordova ionic-framework api audio crosswalk
person Mat    schedule 04.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На Android 6.0 работает следующий скрипт. Он использует API веб-аудио. Я еще не тестировал его на iOS, но у меня есть хорошее предчувствие, что он там будет работать (пожалуйста, прокомментируйте, если это не так).

Вам нужен файл "omg.mp3" в корневом каталоге для тестирования. Вы также должны использовать Cordova и не беспокоиться об ошибке CORS или того же домена, которую вы можете получить в своем браузере.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>StereoPannerNode example</title>

    <link rel="stylesheet" href="">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>StereoPannerNode example</h1>
    <audio controls>  
      <source src="omg.mp3" type="audio/mp3">   
      <p>Browser too old to support HTML5 audio? How depressing!</p>
    </audio>
    <h2>Set stereo panning</h2>
    <input class="panning-control" type="range" min="-1" max="1" step="0.1" value="0">
    <span class="panning-value">0</span>

  </body>
<script>
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');

var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');


// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);

// Create a stereo panner
var panNode = audioCtx.createStereoPanner();

// Event handler function to increase panning to the right and left
// when the slider is moved

panControl.oninput = function() {
  panNode.pan.value = panControl.value;
  panValue.innerHTML = panControl.value;
}

// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the panning using the controls
source.connect(panNode);
panNode.connect(audioCtx.destination);
  </script>
</html>
person Kevin    schedule 23.03.2017