Как использовать flash backend для нового Audio ()? - PullRequest
0 голосов
/ 09 марта 2012

Я сделал сайт, чтобы протестировать аудио html5.К сожалению, некоторые браузеры не поддерживают его.Как использовать флэш-бэкэнд?Я не нашел ничего полезного.Примеры веб-приложений для флэш-памяти в Интернете используют элемент DOM, а не новый Audio ().Я не хочу использовать JQuery для этого небольшого эксперимента.

Мой код:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Audio test</title>
<script type="text/javascript">

//testbegin
var audioTagSupport = !!(document.createElement('audio').canPlayType);

try {
    myAudio = new Audio(""); 
    audioObjSupport = !!(myAudio.canPlayType);
    basicAudioSupport = !!(!audioObjSupport ? myAudio.play : false);
} catch (e) {
    audioObjSupport = false;
    basicAudioSupport = false;
}

if (myAudio.canPlayType) {
    canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) &&
 ("" != myAudio.canPlayType("audio/ogg"));

    canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) &&
 ("" != myAudio.canPlayType("audio/mpeg"));
}
//testend


if(canPlayMp3) {
var audio = new Audio("http://www.w3schools.com/html5/song.mp3");
} else if(canPlayOgg) {
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
} else {
//flash...
}

audio.addEventListener('ended', function() { 
   document.getElementById('log').innerHTML+= 'ended<br/>';
}, false);

audio.addEventListener('canplay', function() {
   document.getElementById('ido').innerHTML = '0 / ' + Math.floor(audio.duration);
   document.getElementById('log').innerHTML+= 'can start<br/>';
}, false);

audio.addEventListener('canplaythrough', function() { 
   document.getElementById('log').innerHTML+= 'loaded<br/>';
}, false);

audio.addEventListener('timeupdate', function() { 
   document.getElementById('timme').innerHTML = Math.floor(audio.currentTime) + ' / ' + Math.floor(audio.duration);
   document.getElementById('buff').innerHTML = audio.buffered.end(audio.buffered.length-1);
}, false);

</script>
</head>
<body>
<a href="#" onclick="audio.play();">start</a><br/>
<a href="#" onclick="audio.pause();">pause</a><br/>
<a href="#" onclick="audio.volume=prompt('from 0 to 1',0.7)">volume</a><br/>
<a href="#" onclick="audio.currentTime = 3;">jump</a><br/>
<a href="#" onclick="audio.playbackRate=prompt('from 0 to 1',0.7)">speed</a><br/>
<p id="timme">?/?</p>
<p id="buff">?</p>
<div id="log">...<br/></div>
</body>
</html>

заранее спасибо

Ответы [ 3 ]

3 голосов
/ 23 марта 2012

MediaElement.js реализует API-интерфейсы медиа-элементов HTML5 с небольшими изменениями, необходимыми для инициализации. Вам просто нужно использовать new MediaElement(document.createElementNS("http://www.w3.org/1999/xhtml", "audio")) вместо new Audio.

Кроме того, вы не должны использовать код, подобный этому:

if(canPlayMp3) {
var audio = new Audio("http://www.w3schools.com/html5/song.mp3");
} else if(canPlayOgg) {
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
} else {
//flash...
}

Просто используйте <source> элементов в одном <audio> элементе.

var
  audio = new Audio
, mp3 = audio.appendChild(document.createElementNS(audio.namespaceURI, "source"))
, ogg = audio.appendChild(mp3.cloneNode())
;

mp3.type = "audio/mpeg";
mp3.src = "http://www.w3schools.com/html5/song.mp3";

ogg.type = "audio/ogg;codecs='vorbis'";
ogg.src = "http://www.w3schools.com/html5/song.mp3";
2 голосов
/ 13 марта 2012

Если я правильно понимаю ваш вопрос, спецификация HTML5 делает это простым.В нем говорится:

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

Вам не нужно делать сложный тест для поддержки браузера.Просто включите html5shim , Modernizr или какой-либо другой эквивалент на своей странице (или создайте элемент audio самостоятельно), чтобы элемент audio существовал в браузерах, которыеподдержать это.Затем включите ваш звук следующим образом:

<audio>

    <source src="Path/To/File.mp3" type="audio/mpeg" />
    <source src="Path/To/File.ogg" type="audio/ogg" />

    <object>
        <!-- Flash player here -->
    </object>

</audio>

Старые браузеры без поддержки audio будут игнорировать элементы source и вместо этого использовать элемент object, содержащий ваш Flash-плеер.

Современные браузеры воспроизводят первый совместимый файл source, который они видят, и игнорируют элемент object.

Извините, если я неправильно понял вопрос.Под «флэш-бэкендом» я предположил, что вы имели в виду «флэш-резервное копирование», как в резервном Flash-проигрывателе на случай, если нативный audio не поддерживается.

0 голосов
/ 13 марта 2012

Возможно, вы захотите изучить использование jplayer.Это плагин jQuery, который обрабатывает аудио и видео в html5 с запасным вариантом вспышки

...