тег <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 и т.д.)

работает :) , только не сразу, секунд 10 ждать надо.

Riim - интересно, Вы пробовали переключиться на другую композицию ?

после нажатия "стоп" вроде переключается, только почему-то всегда одно и тоже играет :( .

А если вместо: myAudio.setAttribute('src', balanUrl)
попробовать так: myAudio.src = balanUrl
?

Кнопка "стоп" это всего лишь чуточку расширенная "пауза".

Я пробовал этот вариант - результат тот же (что не удивительно), вот ссылка

Что если для каждой композиции свой "new Audio" создавать, а для переключения, один выключать, а другой включать?

Я думал об этом, но мне кажется что это не совсем правильно.
Вот у меня есть 100 композиций, это значит что рано или поздно будет создано (запущено) 100 объектов Audio. Весьма вероятно что будет создана внушительная нагрузка на процессор и интернет канал пользователя.

Возможно следует поступить вот так:
1. Создать объект Audio для первой композиции
2. Уничтожить объект Audio для первой композиции
3. Создать объект Audio для второй композиции
и т.д.

Если Вы подскажите мне как можно удалить объект Audio то я попытаюсь реализовать данный алгоритм.

П.С. В яваскрипте я новичек .... ))

если удалить все существующие ссылки на объект, он будет автоматически уничтожен сборщиком мусора.

// ссылка на первый объект
var audio = new Audio();

// ссылка перезаписана, теперь на первый объект ссылок нет, он будет уничтожен автоматически.
audio = new Audio();

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кб

а остальные все равно продолжали? Может там есть какой-нибудь метод вроде "destroy"?