Звуковые эффекты в JavaScript / HTML5


Я использую HTML5 для программирования игр; препятствие, с которым я столкнулся сейчас, - это воспроизведение звуковых эффектов.

специфических требований немного в номере:

  • воспроизведение и смешивание нескольких звуков,
  • воспроизводите один и тот же образец несколько раз, возможно, перекрывая воспроизведение,
  • прервать воспроизведение образца в любой момент,
  • предпочтительно воспроизводить файлы WAV, содержащие (низкое качество) raw PCM, но я могу конвертировать их, of курс.

мой первый подход был использовать HTML5 <audio> элемент и определить все звуковые эффекты на моей странице. Firefox воспроизводит файлы WAV просто персиковый, но вызов #play несколько раз на самом деле не воспроизводит образец несколько раз. Из моего понимания спецификации HTML5,<audio> элемент также отслеживает состояние воспроизведения, так, что объясняет, почему.

моей непосредственной мыслью было клонировать звуковые элементы, поэтому я создал следующую крошечную библиотеку JavaScript что для меня (зависит от jQuery):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

так что теперь я могу сделать Snd.boom(); С консоли Firebug и играть snd/boom.wav, но я все еще не могу воспроизвести один и тот же образец несколько раз. Кажется, что <audio> элемент действительно больше потоковой функции, а не что-то для воспроизведения звуковых эффектов.

есть ли умный способ сделать это так, что мне не хватает, предпочтительно используя только HTML5 и JavaScript?

Я должен также упомянуть, что моя тестовая среда Firefox 3.5 на Ubuntu 9.10. Другие браузеры, которые я пробовал-Opera, Midori, Chromium, Epiphany - дали разные результаты. Некоторые ничего не играют, а некоторые бросают исключения.

16 304

16 ответов:

HTML5 Audio объекты

вам не нужно беспокоиться о <audio> элементы. HTML 5 позволяет получить доступ Audio объекты напрямую:

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

нет поддержки для смешивания в текущей версии спецификации.

чтобы воспроизвести один и тот же звук несколько раз, создайте несколько экземпляров

WebAudio API by W3C

по состоянию на июль 2012 года WebAudio API теперь поддерживается в Chrome и, по крайней мере, частично поддерживается в Firefox, и планируется добавить в IOS с версии 6.

хотя он достаточно надежен, чтобы программно использоваться для основных задач, Аудиоэлемент никогда не предназначался для обеспечения полной поддержки звука для игр и т. д. Он был разработан, чтобы позволить одному фрагменту носителя быть встроенным в страницу, похожую на img метка. Есть много проблем с попыткой использовать аудио тег для игр:

  • временные проскальзывания являются общими со звуковыми элементами
  • нужен звуковой элемент для каждого экземпляра звука
  • события загрузки не совсем надежны, но
  • нет общих регуляторов громкости, нет затухания, нет фильтров/эффектов

я использовал этот Начало Работы С WebAudio статья для начала работы с API WebAudio. Этот Fieldrunners WebAudio Case Study также хорошо читать.

ревун.js

для разработки игр одним из лучших решений является использование библиотеки, которая решает многие проблемы, с которыми мы сталкиваемся при написании кода для интернета, такие как ревун.js. плакальщик.js абстрагирует великий (но низкоуровневый) Web Audio API в простой в использовании базы. Он будет пытаться вернуться к HTML5 Audio Element если Web Audio API недоступный.

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

ВАД.js

еще одна большая библиотека ВАД.js, что особенно полезно для производства синтезатор звука, таких как музыка и эффекты. Например:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

звук для игр

еще одна библиотека, похожая на Wad.js - это"звук для игр", оно имеет больше фокуса на продукции влияний, пока обеспечивающ подобный набор функциональности через относительно определенное (и, возможно, более краткое чувство) API:

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

резюме

каждая из этих библиотек стоит посмотреть, нужно ли вам воспроизводить один звуковой файл или, возможно, создать свой собственный музыкальный редактор на основе html, генератор эффектов или видеоигру.

вы также можете использовать это для обнаружения HTML 5 аудио в некоторых случаях:

http://diveintohtml5.ep.io/everything.html

HTML 5 JS функция обнаружения

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

вот один из методов, позволяющий воспроизводить даже один и тот же звук одновременно. Объедините с загрузчиком, и все готово. Это работает с Firefox 17.0.1 по крайней мере, еще не тестировал его ни с чем другим.

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

привязать это к клавише клавиатуры, и наслаждайтесь:

player("step");

звучит как то, что вы хотите, это многоканальные звуки. Предположим, у вас есть 4 канала (например, в действительно старых 16-битных играх), я еще не успел поиграть с функцией звука HTML5, но вам не нужно просто 4 элемента

Я делал это раньше без элемента HTML5

посмотреть jai ( ->зеркала) (javascript audio interface) сайт. Глядя на их источник, они, кажется, звонят play() неоднократно, и они упоминают, что их библиотека может быть подходящей для использования в играх на основе HTML5.

вы можете запустить несколько звуковых событий одновременно, который смог быть использован для создания игр Javascript, или имея голос, говорящий над некоторыми фон музыка

играть одного и того же образца несколько раз, не было бы возможно сделать что-то вроде этого:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

(e это звуковой элемент)

возможно, я совершенно неправильно понял вашу проблему, вы хотите, чтобы звуковой эффект воспроизводился несколько раз одновременно? Тогда это совершенно неправильно.

вот идея. Загрузите все ваши аудио для определенного класса звуков в один отдельный аудиоэлемент, где данные src-это все ваши образцы в непрерывном аудиофайле (вероятно, вам нужна тишина между ними, чтобы вы могли поймать и вырезать образцы с таймаутом с меньшим риском кровотечения в следующий образец). Затем, стремиться к образцу и играть в нее, когда это необходимо.

Если вам нужно больше, чем один из них, чтобы играть, вы можете создать дополнительный звуковой элемент с тем же ФОК так что он кэшируется. Теперь у вас фактически есть несколько "треков". Вы можете использовать группы треков с любимыми схему распределения ресурсов как по кругу и т. д.

вы также можете указать другие параметры, такие как звуки очереди в дорожку для воспроизведения, когда этот ресурс становится доступным или вырезает Текущий образец воспроизведения.

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org / ~roc/audio-latency-repeating.html

работает нормально в Firefox и Chrome для меня.

чтобы остановить звук, который вы начали, не var sound = документ.метода getElementById("выстрел").cloneNode (true); звук.играть(); а потом ... звук.пауза();

Я бы рекомендовал использовать SoundJS, библиотека, которую я помогаю развивать. Он позволяет вам писать единую базу кода, которая работает везде, с SoundJS, выбирая веб-аудио, html-аудио или флеш-аудио по мере необходимости.

Это позволит вам делать все, что вы хотите:

  • воспроизведение и смешивание нескольких звуков,
  • воспроизводите один и тот же образец несколько раз, возможно, перекрывая воспроизведение
  • прервать воспроизведение образца в любое точка
  • воспроизведение WAV файлов, содержащих (в зависимости от поддержки браузера)

надеюсь, что это поможет.

невозможно сделать несколько выстрелов, играя с одним <audio> элемент. Для этого нужно использовать несколько элементов.

Я столкнулся с этим при программировании генератора карт musicbox. Начал с разных библиотек, но каждый раз был какой-то глюк. Отставание от нормальной реализации звука было плохим, без нескольких игр... в конечном итоге закончилось использование библиотеки lowlag + soundmanager:

http://lowlag.alienbill.com/ и http://www.schillmania.com/projects/soundmanager2/

вы можете проверить реализацию здесь: http://musicbox.grit.it/

Я создал WAV + ogg файлы для нескольких игр браузера. Этот плеер musicbox работает отзывчиво на ipad, iphone, Nexus, mac, ПК... работать на меня.

Я знаю, что это полный хак, но подумал, что я должен добавить этот образец с открытым исходным кодом аудио библиотеки я поставил на github некоторое время назад...

https://github.com/run-time/jThump

после нажатия на ссылку ниже, введите на клавиши первого ряда, чтобы играть блюз рифф (также несколько типов ключей, в то же время и т. д.)

пример использования библиотеки jThump>>http://davealger.com/apps/jthump/

Она в основном работает, делая невидимым <iframe> элементы, которые загружают страницу, которая воспроизводит звук onReady ().

это, конечно, не идеал но вы могли бы +1 это решение основано только на творчестве (и тот факт, что он с открытым исходным кодом и работает в любом браузере, который я пробовал) я надеюсь, что это дает кому-то еще поиск некоторых идей, по крайней мере.

:)

выбранный ответ будет работать во всем, кроме IE. Я написал учебник о том, как заставить его работать кросс-браузер = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

вот функция, которую я написал;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

вам также нужно добавить следующий тег на html-страницу:

<bgsound id="sound">

наконец, вы можете вызвать функцию и просто пройти путь здесь:

playSomeSounds("sounds/welcome.wav");

вы всегда можете попробовать AudioContext он имеет ограниченную поддержку, но это часть Web audio api рабочий проект. Это может стоить того, если вы планируете выпустить что-то в будущем. И если вы только программируете для chrome и Firefox, вы Золотой.