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

Конкретные требования немногочисленны:

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

Моим первым подходом было использование <audio>элемента HTML5 и определение всех звуковых эффектов на моей странице. 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 - дали разные результаты. Некоторые ничего не играют, а некоторые бросают исключения.

HTML5 Audioобъекты

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

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

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

Чтобы воспроизвести один и тот же звук несколько раз, создайте несколько экземпляров Audioобъекта. Вы также можете установить snd.currentTime=0на объект после того, как он заканчивает играть.

Поскольку конструктор JS не поддерживает резервные <source>элементы, вы должны использовать

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

проверить, поддерживает ли браузер Ogg Vorbis.

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

API WebAudio от W3C

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

Несмотря на то, что он достаточно надежен, чтобы его можно было использовать программно для основных задач, элемент Audio никогда не предназначался для обеспечения полной поддержки звука для игр и т. Д. Он был разработан для того, чтобы позволить одной части мультимедиа быть встроенной в страницу, подобно img тег. Существует много проблем при попытке использовать аудио тег для игр:

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

Я использовал эту статью Начало работы с WebAudio, чтобы начать работу с API WebAudio. Fieldrunners WebAudio Case Study также хорошо читать.

howler.js

Для разработки игр одним из лучших решений является использование библиотеки, которая решает многие проблемы, с которыми мы сталкиваемся при написании кода для Интернета, например, howler.js . howler.js абстрагирует отличный (но низкоуровневый) API-интерфейс Web Audio в простой в использовании фреймворк. Он попытается использовать 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);

wad.js

Еще одна замечательная библиотека - это wad.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/, ''));
}

Вот один из методов, позволяющих воспроизводить даже один и тот же звук одновременно. Объедините с preloader, и все готово. Это работает с 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 элемента <audio> и цикл, который используется воспроизвести следующий звуковой эффект? Вы пробовали это? Что случается? Если это работает: чтобы воспроизводить больше звуков одновременно, просто добавьте больше элементов <audio>.

Я делал это раньше без HTML5-элемента <audio>, используя небольшой объект Flash из http://flash-mp3-player.net/ - я написал музыкальную викторину ( http://webdeavour.appspot.com/ ) и использовал его для воспроизведения музыкальных клипов, когда пользователь нажал кнопку для вопроса. Первоначально у меня было по одному проигрывателю на вопрос, и было возможно воспроизводить их поверх друг друга, поэтому я поменял его так, чтобы был только один проигрыватель, который я указывал на разные музыкальные клипы.

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

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

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

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

( eэто аудио элемент)

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

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

Если вам нужно более одного из них для воспроизведения, вы можете создать дополнительный аудиоэлемент с тем же src, чтобы он кэшировался. Теперь у вас есть несколько «треков». Вы можете использовать группы треков с вашей любимой схемой распределения ресурсов, такой как Round Robin и т. Д.

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

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

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

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

Чтобы остановить звук, который вы начали, выполните var sound = document.getElementById ("shot"). CloneNode (true); Sound.play (); и позже sound.pause ();

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

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

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

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

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

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

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

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

Я сгенерировал файлы wav + ogg для мультибраузерной игры. Этот музыкальный плеер работает на 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-incключ-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, то вы великолепны.

Web Audio API - правильный инструмент для этой работы. Есть немного работы, связанной с загрузкой звуковых файлов и их воспроизведением. К счастью, существует множество библиотек, которые упрощают работу. Заинтересовавшись звуками, я также создал библиотеку под названием Musquito вы также можете проверить.

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