Как предотвратить звук HTML5 от загрузки/потоковой загрузки при загрузке?

У меня есть сайт с одной страницей, в котором представлена ​​коллекция аудиоплеер HTML5. Проблема в том, что сайт стал медленным, потому что следующие браузеры начинают предварительно загружать контент (mp3 и ogg)

Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)

Я использую базовый код для реализации игроков. Есть ли способ предотвратить использование браузерами предварительно загруженных аудиофайлов и работать только при нажатии на них?

<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>

ОТВЕТЫ

Ответ 1

<audio controls="controls" preload="none">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Примечание. preload="none" - может использоваться с VIDEO HTML5 и AUDIO HTML5.

Атрибут preload поддерживается во всех основных браузерах, кроме Internet Explorer и Opera.

Ответ 2

MSIE по-прежнему составляет около 30% всего веб-трафика, поэтому preload="none" - это только часть решения. На нескольких страницах, где у меня была эта проблема, я добавляю небольшой script в мои заголовки страниц:

<script type="text/javascript">
function addAudio(t) {
  var l=t.innerHTML.length;
  var audioName=t.parentElement.id;
  if( t.children.length==0) {
    t.innerHTML=t.innerHTML+'&nbsp; &nbsp; <audio controls="controls"><source src="'+
      audioName+'.ogg" type="audio/ogg" /><source src="'+
      audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
  }
}
</script>

а затем используйте DHMTL для динамического добавления звукового тега, например:

<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>

Это делается для определения элемента списка, содержащего текст. Когда пользователь просматривает клики по растянутому тексту, javascript запускает и добавляет тег <audio>. Вы также можете использовать атрибут onmouseover, чтобы звуковой тег добавлялся при наведении.

Добавьте атрибут preload в сгенерированный код, если хотите. Это простой подход, но если вы уже используете jQuery на своей веб-странице, я отмечаю, что это предлагает элегантные альтернативы.