Как воспроизвести несколько звуковых файлов на одной веб-странице?(по клику лучшая практика) - PullRequest
Новая
       42

Как воспроизвести несколько звуковых файлов на одной веб-странице?(по клику лучшая практика)

6 голосов
/ 26 августа 2011

У меня есть страница, где есть список словарей. У меня есть TTS для каждого словаря. Текущий подход, который я использую, состоит в том, чтобы включить mp3-плеер для каждого словаря. Это создает задержку для загрузки всей флэш-памяти, поскольку на одной странице может быть более 10 словарей.

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

Какой-то альтернативный подход, на мой взгляд, заключается в следующем:

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

Итак, мой вопрос,

Есть ли какой-нибудь плагин javascript или jquery, который может использовать любой из 2 других подходов?

спасибо

1 Ответ

4 голосов
/ 26 августа 2011

Вы можете использовать тег <audio> (HTML5) и контролировать его, когда загружать файлы.
Он поддерживается в большинстве браузеров, таких как Google Chrome, Firefox, Opera ...

У него есть два способа установить ссылку:

Путь 1 

<audio src="YOUR FILE LINK HERE">
    <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed>
</audio>

Путь 2 

<audio>
    <source src="YOUR FILE LINK HERE (MP3)" type="audio/ogg" />
    <source src="YOUR OTHER FILE LINK HERE (OGG)" type="audio/mp3" />
    <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed>
</audio>

Атрибуты

  • Поставьте controls="controls", если хотите, чтобы он отображал аудиоплеер.
  • Поставьте loop="loop", если хотите, чтобы он зациклил аудио.
  • Поставьте autoplay="autoplay", если хотите, чтобы он воспроизводил звук самостоятельно.
  • Поставьте preload="preload", если хотите, чтобы он был предварительно загружен.

JavaScript Controlling

Вы также можете управлять им с помощью JavaScript.

Для воспроизведения: document.getElementById("YOUR AUDIO TAG").play()
Чтобы приостановить его: document.getElementById("YOUR AUDIO TAG").pause()

Читать дальше

...