Дизайн-студия Артема Сучкова
Кто я? Работы Блог Типография

Блог

http://artem-suchkov.livejournal.com
Web-дизайн
Jquery cкрипт для обертки mp3 файлов в flash проигрыватель
Однажды возникла потребность в поиске необходимого решения.

Обрисуем следующую ситуацию.

У нас есть возможность публиковать mp3 или любые другие медиа файлы на сайте, путем вставки прямых ссылок вида http://site.ru/my_mp3_file.mp3
Но в данном случае пользователь сможет только скачивать файл к себе на компьютер и прослушивать его через специальный проигрыватель.
Необходимо было найти решение, как подключить ссылку на файл к flash проигрывателю (в конкретном примере от разработчиков uppod.com) для того чтобы вместо прямой ссылки посетитель сайта видел блок с проигрывателем и сразу мог прослушать материал без скачивания файла.

Решение было найдено с помощью библиотеки jquery (jquery.com)

// Подключаем библиотеку

<script type="text/javascript" src="/js/jquery-1.2.6.pack.js"></script>

// Подключаем сам скрипт

<sctipt type="text/javascript">

$(document).ready(function(){

// Во первых, выбираем все элементы на странице со ссылкой mp3.

$("a[href$=.mp3]").each(function (i) {

// Присваеваем переменной htmlStr значение аттрибута href (ссылка на сам mp3 файл)

var htmlStr = $(this).attr("href");

// Присваеваем переменной title название mp3 файла

var title = $(this).text();

// Избавляемся от ссылки на mp3 файл, заменив ее на # и добавляем вместо ссылки html код плейера, вставив в путь ссылку на файл, полученную строкой выше. 

$(this).attr('href','#materials').html('<object id="audioplayer3098" width="400" height="90"><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="http://yoursite.ru/uppod/uppod.swf" /><param name="flashvars" value="comment='+ title +'&amp;st=http://yoursite.ru/uppod/audio4-434.txt&amp;file='+ htmlStr +'" /><embed src="http://yoursite.ru/uppod/uppod.swf" type="application/x-shockwave-flash" allowscriptaccess="always" wmode="transparent" flashvars="comment='+ title +'&amp;st=http://yoursite.ru/uppod/audio4-434.txt&amp;file='+ htmlStr +'" width="400" height="90"></embed></object>');

});

});

</script>

 

После применения данного скрипта на странице, пользователь вместо обычных mp3 ссылок увидит flash плейер uppod, с вашим файлом, готовым для проигрывания.

Таким же макаром можно поступать и с flv файлами, только необходими подобрать к ним соответствующий проигрыватель.

Статьи
 
Создание страниц: простота и элегантность
Хороший дизайн... это как хайку — весь из недомолвок. © Вайткунас
Ненужные споры
О том, как избежать ненужных споров во время разработки web проекта
Правильные заголовки для web'а
О том, как правильно писать заголовки для сети Интернет. Советы Якоба Нильсена