Подтвердить что ты не робот

Предварительная загрузка нескольких аудиофайлов

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

Вот приблизительное представление о том, что я делаю:

http://jsfiddle.net/L0c9ccx9/20/

audio.src = ...;
audio.load();
audio.play();
4b9b3361

Ответ 1

var audioFiles = [
    "http://www.teanglann.ie/CanC/nua.mp3",
    "http://www.teanglann.ie/CanC/ag.mp3",
    "http://www.teanglann.ie/CanC/dul.mp3",
    "http://www.teanglann.ie/CanC/freisin.mp3"
];
    
function preloadAudio(url) {
    var audio = new Audio();
    // once this file loads, it will call loadedAudio()
    // the file will be kept by the browser as cache
    audio.addEventListener('canplaythrough', loadedAudio, false);
    audio.src = url;
}
    
var loaded = 0;
function loadedAudio() {
    // this will be called every time an audio file is loaded
    // we keep track of the loaded files vs the requested files
    loaded++;
    if (loaded == audioFiles.length){
    	// all have loaded
    	init();
    }
}
    
var player = document.getElementById('player');
function play(index) {
    player.src = audioFiles[index];
    player.play();
}
    
function init() {
    // do your stuff here, audio has been loaded
    // for example, play all files one after the other
    var i = 0;
    // once the player ends, play the next one
    player.onended = function() {
    	i++;
        if (i >= audioFiles.length) {
            // end 
            return;
        }
    	play(i);
    };
    // play the first file
    play(i);
}
    
// we start preloading all the audio files
for (var i in audioFiles) {
    preloadAudio(audioFiles[i]);
}
<audio id="player"></audio>

Ответ 2

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

<audio src="audioclip.mp3" controls autoplay preload loop>
    <p>This web browser does not support mp3 format</p>
</audio>

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

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

Предварительная загрузка: Это элемент, который ваш вопрос специально ищет. Если вы включите этот элемент, звуковой файл будет загружаться при загрузке веб-страницы.

Loop: Этот элемент повторно воспроизводит аудиофайл, пока пользователь не остановит его (если элементы управления включены)

часть, где говорится: "Этот веб-браузер не поддерживает формат mp3" должен отображаться только на экране пользователя, если браузер устарел и не поддерживает формат mp3.

Чтобы отключить элемент, просто не включайте его в код.

Надеюсь, это помогло!

UPDATE, этого элемента должно быть достаточно для того, что вы пытаетесь сделать.

Ответ 3

Если вы хотите большего контроля, чем элемент <audio>, вы можете использовать веб-аудио.

Предварительно загрузите файлы с помощью XMLHttpRequest и передайте их в decodeAudioData(). Затем у вас есть объекты AudioBuffer в памяти, которые вы можете вызвать воспроизведение по мере необходимости.

Here демонстрацию нескольких коротких образцов, предварительно загруженных и воспроизводимых без зазоров (источник).

(Примечание: из-за смешной ошибки Chrome вышеупомянутая демонстрация в настоящее время является только Firefox. Это чисто проблема с кодеком: поддержка браузера для Web Audio на самом деле неплохое. В реальном приложении вы, вероятно, должны предлагать как минимум Vorbis и AAC для максимальной совместимости.)

Ответ 4

У вас может быть страница JSP, в которой аудиофайлы, хранящиеся в базе данных, могут быть доступны и загружены в Карту с некоторым ключом для вашего аудиофайла и значением в качестве вашего аудиофайла. И игра может быть выполнена только путем вызова аудиофайла.