аудио без петель html5 - PullRequest
       1

аудио без петель html5

27 голосов
/ 07 сентября 2011

У кого-нибудь есть идеи, как выполнить зазор без петель для аудиотега?Я думаю, что-то на основе JavaScript ..

У меня есть цикл, скажем, 1 мера, и я хочу, чтобы он зацикливался и оставался в темпе.Поэтому мне нужно, чтобы петля была гладкой / без зазоров.Когда я просто устанавливаю «loop» в true, он будет отставать и не будет оставаться в темпе.

Ответы [ 9 ]

28 голосов
/ 17 марта 2014

Хотя все еще не идеально, это сработало для меня:

var audio_file = new Audio('whatever.mp3')
audio_file.addEventListener('timeupdate', function(){
                var buffer = .44
                if(this.currentTime > this.duration - buffer){
                    this.currentTime = 0
                    this.play()
                }}, false);

Поэкспериментируйте с размером буфера, чтобы найти наиболее подходящий для вас

8 голосов
/ 19 сентября 2014

Решение состоит в том, чтобы иметь 2 экземпляра для управления воспроизведением.

Примерно так:

var current_player = "a";
var player_a = document.createElement("audio");
var player_b = document.createElement("audio");

player_a.src = "sounds/back_music.ogg";
player_b.src = player_a.src;

function loopIt(){
    var player = null;

    if(current_player == "a"){
        player = player_b;
        current_player = "b";
    }
    else{
        player = player_a;
        current_player = "a";
    }

    player.play();

    setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds.
}

loopIt();

И если вы используете SoundManager2, источник аудио через URI данных вместо запроса URL.

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

5 голосов
/ 22 сентября 2011

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

Есть два варианта, на которые стоит обратить внимание - SoundManager2 (http://www.schillmania.com/projects/soundmanager2/) - отличная библиотека, которая, вероятно, будет здесь полезна, хотя в этом случае она будет использовать Flash для воспроизведения звука.

Другой вариант - взглянуть на API-интерфейс Web Audio в Chrome или API-интерфейс Audio Data в Firefox. Оба они действительно новы и еще не готовы к прайм-тайму, но позволяют выполнять такие вещи, как запланированное воспроизведение звука, зацикливание инамного больше. Проверьте http://www.htmlfivewow.com/slide58 для получения дополнительной информации!

4 голосов
/ 01 сентября 2012

Я пытаюсь сделать это с интервалами, попробуйте это https://github.com/Hivenfour/SeamlessLoop

работал у меня с wav-файлами, протестирован на Chrome, Firefox и Opera

3 голосов
/ 18 декабря 2015

Я безуспешно пробовал описанные выше методы. В моем случае использования (с использованием Firefox 43.0) все, кажется, щелкают. Частично это связано с необходимостью зацикливания непрерывного тона, в котором нет удобных разрывов или низких точек (я пытаюсь создать движущийся автомобиль, используя 22010 сэмплов / сек. Моно .wav файлов).

Однако я могу объединить мой файл .wav несколько раз, чтобы создать один длинный файл .wav, в котором нет щелчков (за исключением редкого, который все еще происходит в конце), это потому, что мой оригинал. WAV файл был тщательно обработан, чтобы быть циклическим.

Теперь я планирую, чтобы несколько из этих длинных файлов воспроизводились непрерывно в одно и то же время (по одному для каждого уровня оборотов автомобиля) и микшировали эти сигналы с помощью gainNode (описанного здесь: http://www.html5rocks.com/en/tutorials/webaudio/intro/).. Это должно привести к щелкните бесплатный автомобильный двигатель, который будет звучать намного лучше, чем простой запуск и остановка воспроизведения отдельных файлов .wav.

3 голосов
/ 22 августа 2015

Да, это настоящая боль ... очевидно, кто бы ни определил элемент, он не был ни музыкантом, ни разработчиком игры - хе.

Во всяком случае, в зависимости от того, что вы делаете, другойВозможный обходной путь - создать MP3 / OGG / WAV, который будет несколько повторений вашего цикла.Это удобно, когда вы хотите зациклить звук только несколько раз, прежде чем перестанете его воспроизводить.

Примером этого может быть игрок, толкающий ракетный корабль.На данный момент я разрабатываю игру только с этим сценарием и создал MP3 с несколькими петлями эффекта тяги, что составляет около 6 секунд воспроизведения.Чтобы минимизировать размер загрузки, я закодировал звук со скоростью 32 кбит / с - чуть ниже, и он начинает звучать неприемлемо громко, поскольку звук приведения в основном представляет собой белый шум.Я просто делаю ставку на тот факт, что очень маловероятно, что игрок будет тянуть непрерывно в течение 6 секунд.Если они это сделают, они услышат разрыв, но я могу жить с этим.Большую часть времени они не будут тянуть что-либо подобное, поэтому не слышат сбоев.

Другой вариант, который я рассмотрел, - это пара сэмплов, которые появляются и исчезают, и обе петли сoffset.

Хотя они работают для некоторых игровых сценариев, они почти наверняка не будут работать для любого музыкального сценария.YMMV.

2 голосов
/ 01 ноября 2015

Я искал пару часов для решения THE, так как это была первая страница, на которой я появился, я хочу поделиться с вами ссылкой на библиотеку JS, которая, кажется, прекрасно воспроизводит цикл звуковых дорожек без любой разрыв Gapless-5

1 голос
/ 29 сентября 2015

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

скажем, у нашего трека есть 5,3 секунды

у вас есть 2 звуковых дорожки одного и того же файла. когда заканчивается один (например, за 1 секунду до окончания - 4,3 с - 5,3 с), вы постепенно его уменьшаете (установите объем в процентах от позиции в течение этой одной секунды). в то же время вторая дорожка начинает исчезать (0 с-1 с). Вы можете сделать это через интервал 50 мс или что-то еще, в зависимости от вашей аудиобиблиотеки

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

1 голос
/ 18 апреля 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...