Предварительная загрузка MP3-файла перед использованием кнопки воспроизведения - PullRequest
Новая
       2

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

5 голосов
/ 08 декабря 2011

У меня есть следующий код: 

function playSound(source) {
    document.getElementById("sound_span").innerHTML =
        "<embed src='" + source + "' hidden=true autostart=true loop=false>";
}

<span id="sound_span"></span>
<button onclick="playSound('file.mp3');"></button>

Как только вы нажмете кнопку воспроизведения, MP3 загрузится, а затем начнет воспроизводиться.Тем не менее, это может занять некоторое время, если он имеет как 1 МБ.Что мне нужно, это предварительно загруженный (так же, как вы можете сделать с изображениями).Поэтому, когда страница загружается, mp3 будет передаваться в потоковом режиме, и, если, например, через 10 секунд пользователь нажмет кнопку «Воспроизведение», ему не придется ждать, пока сначала будет загружена mp3, поскольку она уже транслируется.

Есть идеи?Заранее благодарим за любой совет!

Ответы [ 2 ]

6 голосов
/ 09 декабря 2011

Вы можете предварительно загрузить, используя <audio /> для новых браузеров. Установите autoplay = false. Для старых браузеров, которые не поддерживают <audio />, вы можете использовать <bgsound />. Для предварительной загрузки звука установите громкость на -10000. 

function preloadSound(src) {
    var sound = document.createElement("audio");
    if ("src" in sound) {
        sound.autoPlay = false;
    }
    else {
        sound = document.createElement("bgsound");
        sound.volume = -10000;
    }
    sound.src = src;
    document.body.appendChild(sound);
    return sound;
}

Это даст звук в кеш вашего браузера. Затем, чтобы играть в нее, вы можете продолжать делать то, что делаете с <embed />. Или, если вы хотите воспользоваться возможностями HTML5, вы можете вызвать .play() для возвращенного элемента <audio />. Вы даже можете добавить метод воспроизведения к <bgsound />: 

function loadSound (src) {
    var sound = document.createElement("audio");
    if ("src" in sound) {
        sound.autoPlay = false;
    }
    else {
        sound = document.createElement("bgsound");
        sound.volume = -10000;
        sound.play = function () {
            this.src = src;
            this.volume = 0;
        }
    }
    sound.src = src;
    document.body.appendChild(sound);
    return sound;
 }

Тогда используйте это так: 

var sound = loadSound("/mySound.ogg");  //  preload
sound.play();

Единственное предупреждение - FireFox не поддерживает mp3. Вам придется конвертировать ваши файлы в ogg.

Рабочая демоверсия: http://jsfiddle.net/PMj89/1/

4 голосов
/ 08 декабря 2011

Вы можете использовать атрибут preload элемента HTML5 <audio> и вернуться к <embed>.

...