Streaming MP3 вместо загрузки его с HTML5 аудио теге

Question

В функции document.ready, у меня есть это:

audioElement = document.createElement('audio'); 

audioElement.setAttribute('src', 'http://www.mfiles.co.uk/mp3-downloads/Toccata-and-Fugue-Dm.mp3'); 

$('#ToggleStart').click(function() { 
    audioElement.play(); 
}); 

$('#ToggleStop').click(function() { 
    audioElement.pause(); 
}); 

Проблема в том, что MP3-загружается при загрузке страницы, что вызывает значительное время загрузки с MP3 составляет более 2 МБ. Я хочу, чтобы MP3 транслировался. Возможно ли это, и если да, то что мне нужно изменить?

jsFiddle here

Answer 1

Вы очень близки к получению этого права. Я посмотрел на ваш JSFiddle и заметил, что звук уже работает (я могу воспроизвести файл до его окончательной загрузки). Вы можете легко убедиться в этом, проверяя трафик сети в вашем браузере: «частичное содержание»

на базе Chrome дисплеев, но играет mp3 одновременно. Ваша конкретная проблема заключается в том, что она загружается и играет слишком рано. Поэтому, если мы посмотрим spec, мы можем увидеть некоторые варианты.

preload = "none" or "metadata" or "auto" or "" (empty string) or empty 
Represents a hint to the UA about whether optimistic downloading of the audio stream itself or its metadata is considered worthwhile. 
- "none": Hints to the UA that the user is not expected to need the audio stream, or that minimizing unnecessary traffic is desirable. 
- "metadata": Hints to the UA that the user is not expected to need the audio stream, but that fetching its metadata (duration and so on) is desirable. 
- "auto": Hints to the UA that optimistically downloading the entire audio stream is considered desirable. 

Как вы не отображая информацию о звуковом файле можно игнорировать параметр METDATA, это означает, что вы хотите установить атрибут preload="none". Поэтому, если вы измените JSFiddle немного динамически установить это:

audioElement.setAttribute('preload', "none"); 
audioElement.setAttribute('src', 'http://www.mfiles.co.uk/mp3-downloads/Toccata-and-Fugue-Dm.mp3'); 

Вот JSFiddle показывает результат, если вы воспитываете вкладку сети в Chrome you'see видеть, что загрузка не началась, пока вы начнете играя в mp3.