25.07.2010, 08:28
|
|
Люмус, Емаксос Developer!
|
|
Регистрация: 06.05.2010
Сообщений: 677
|
|
тег <audio> в Opera, Chrome, Firefox
Заинтересовался новым тегом <audio> и его API Javascript
Хочу реализовать простой плеер с поддержкой плейлистов, но проблема в том что у меня не получается запустить следующую композицию в браузерах Chrome и Firefox. В Opera все элементрно, достаточно обьявить(заменить) параметр src, к примеру вот так:
audio.setAttribute('src', 'song.ogg')
и эта композиция сразу становится доступной для проигрывания.
Как я выше говорил в Chrome и Firefox это не работает.
Посоветуйте как реализовать переключение на другую композицию в Chrome и Firefox
Вот код моего, простого проигрывателя:
<script type="text/javascript">
var balanUrl = 'http://dl.dropbox.com/u/6001712/player/audio-100/Dan%20Balan%20-%20Chica%20Bomb.ogg';
var plumbUrl = 'http://dl.dropbox.com/u/6001712/player/audio-100/Plumb%20-%20Hang%20On.ogg';
var sergeUrl = 'http://dl.dropbox.com/u/6001712/player/audio-100/Serge%20Devant%20Emma%20Hewitt%20-%20Take%20Me%20With%20You.ogg';
var myAudio = new Audio();
var play = document.getElementById('play');
play.addEventListener('click', function(){myAudio.play();}, false);
var pause = document.getElementById('pause');
pause.addEventListener('click', function(){myAudio.pause();}, false);
var balan = document.getElementById('balan');
balan.addEventListener('click', function(){myAudio.setAttribute('src', balanUrl);myAudio.play();}, false);
var plumb = document.getElementById('plumb');
plumb.addEventListener('click', function(){myAudio.setAttribute('src', plumbUrl);myAudio.play();}, false);
var serge = document.getElementById('serge');
serge.addEventListener('click', function(){myAudio.setAttribute('src', sergeUrl);myAudio.play();}, false);
</script>
Парочка ссылок на мои плеера:
Простой плеер с трема композициями
Более продвынутый плеер с плейлистом на 100 композицый и случайным проигрованием
П.С. Плееры коректно работают только в браузере Opera, поэтому не нужно писать что не работает в моем классном Chrome (IE, Firefox, Safari и т.д.)
|
|
25.07.2010, 08:52
|
|
Рассеянный профессор
|
|
Регистрация: 06.04.2009
Сообщений: 2,379
|
|
Сообщение от Magneto
|
не работает в моем классном Chrome
|
работает , только не сразу, секунд 10 ждать надо.
|
|
25.07.2010, 08:57
|
|
Люмус, Емаксос Developer!
|
|
Регистрация: 06.05.2010
Сообщений: 677
|
|
Riim - интересно, Вы пробовали переключиться на другую композицию ?
|
|
25.07.2010, 10:16
|
|
Рассеянный профессор
|
|
Регистрация: 06.04.2009
Сообщений: 2,379
|
|
Сообщение от Magneto
|
Вы пробовали переключиться на другую композицию ?
|
после нажатия "стоп" вроде переключается, только почему-то всегда одно и тоже играет .
А если вместо: myAudio.setAttribute('src', balanUrl)
попробовать так: myAudio.src = balanUrl
?
|
|
25.07.2010, 11:12
|
|
Люмус, Емаксос Developer!
|
|
Регистрация: 06.05.2010
Сообщений: 677
|
|
Сообщение от Riim
|
после нажатия "стоп" вроде переключается, только почему-то всегда одно и тоже играет .
|
Кнопка "стоп" это всего лишь чуточку расширенная "пауза".
Сообщение от Riim
|
А если вместо: myAudio.setAttribute('src', balanUrl)
попробовать так: myAudio.src = balanUrl
?
|
Я пробовал этот вариант - результат тот же (что не удивительно), вот ссылка
|
|
25.07.2010, 11:37
|
|
Рассеянный профессор
|
|
Регистрация: 06.04.2009
Сообщений: 2,379
|
|
Что если для каждой композиции свой "new Audio" создавать, а для переключения, один выключать, а другой включать?
|
|
25.07.2010, 12:25
|
|
Люмус, Емаксос Developer!
|
|
Регистрация: 06.05.2010
Сообщений: 677
|
|
Сообщение от Riim
|
Что если для каждой композиции свой "new Audio" создавать, а для переключения, один выключать, а другой включать?
|
Я думал об этом, но мне кажется что это не совсем правильно.
Вот у меня есть 100 композиций, это значит что рано или поздно будет создано (запущено) 100 объектов Audio. Весьма вероятно что будет создана внушительная нагрузка на процессор и интернет канал пользователя.
Возможно следует поступить вот так:
1. Создать объект Audio для первой композиции
2. Уничтожить объект Audio для первой композиции
3. Создать объект Audio для второй композиции
и т.д.
Если Вы подскажите мне как можно удалить объект Audio то я попытаюсь реализовать данный алгоритм.
П.С. В яваскрипте я новичек .... ))
|
|
25.07.2010, 12:54
|
|
Рассеянный профессор
|
|
Регистрация: 06.04.2009
Сообщений: 2,379
|
|
Сообщение от Magneto
|
мне как можно удалить объект Audio
|
если удалить все существующие ссылки на объект, он будет автоматически уничтожен сборщиком мусора.
// ссылка на первый объект
var audio = new Audio();
// ссылка перезаписана, теперь на первый объект ссылок нет, он будет уничтожен автоматически.
audio = new Audio();
|
|
25.07.2010, 16:25
|
|
Люмус, Емаксос Developer!
|
|
Регистрация: 06.05.2010
Сообщений: 677
|
|
Riim
Если я Вас правильно понял ...
Я написал следующий код:
<script type="text/javascript">
var balanUrl = 'http://dl.dropbox.com/u/6001712/player/audio-100/Dan%20Balan%20-%20Chica%20Bomb.ogg';
var plumbUrl = 'http://dl.dropbox.com/u/6001712/player/audio-100/Plumb%20-%20Hang%20On.ogg';
var sergeUrl = 'http://dl.dropbox.com/u/6001712/player/audio-100/Serge%20Devant%20Emma%20Hewitt%20-%20Take%20Me%20With%20You.ogg';
var myAudio = new Audio();
var play = document.getElementById('play');
play.addEventListener('click', function(){myAudio.play();}, false);
var pause = document.getElementById('pause');
pause.addEventListener('click', function(){myAudio.pause();}, false);
var stop = document.getElementById('stop');
stop.addEventListener('click', function(){myAudio.pause();myAudio.currentTime = 0;}, false);
var balan = document.getElementById('balan');
balan.addEventListener('click', function(){myAudio = new Audio();myAudio.setAttribute('src', balanUrl);myAudio.play();}, false);
var plumb = document.getElementById('plumb');
plumb.addEventListener('click', function(){myAudio = new Audio();myAudio.setAttribute('src', plumbUrl);myAudio.play();}, false);
var serge = document.getElementById('serge');
serge.addEventListener('click', function(){myAudio = new Audio();myAudio.setAttribute('src', sergeUrl);myAudio.play();}, false);
</script>
В этом случае браузер запускает (создает) дополнительный поток и при этом не закрывает предыдущий - в итоге несколько одновременно звучащих песен. Можно одну и ту же композицию несколько раз запустить ссылка
Поэтому в каждую функцию для запуска песен я добавил:
myAudio.pause();
получилось:
.........
var small = document.getElementById('small');
small.addEventListener('click', function(){myAudio.pause();myAudio = new Audio();myAudio.setAttribute('src', smallUrl);myAudio.play();}, false);
.........
Теперь слышно только одну композицию.
Но как оказалось браузер продолжает докачивать все композиции которые были запущены, даже если их прервать запуском новой песни.
Причем это делают все 3 браузера Opera, Chrome и Firefox
Замечу что Opera при обычном изменении src сразу переставала качать предыдущий файл.
Вот ссылка здесь два файла 22мб и 260кб
|
|
25.07.2010, 18:44
|
|
Рассеянный профессор
|
|
Регистрация: 06.04.2009
Сообщений: 2,379
|
|
Сообщение от Magneto
|
Opera при обычном изменении src сразу переставала качать предыдущий файл
|
а остальные все равно продолжали? Может там есть какой-нибудь метод вроде "destroy"?
|
|
|
|