Дизайн принадлежит администрации сайта VSEpodrad.ru.
Администрация не несет ответственности за содержимое на нашем портале.
Администратор: .
|
Меню сайта
Смотри и качай бесплатно
Опрос сайта
Реклама
Онлайн пользователи
Онлайн всего: 14
Гостей: 14
Пользователей: 0
Раздел в разработке
VSEpodrad.ru
В разработке!
На сайт добавлено файлов
mp3 плеер для сайта Dewplayer
Вашему вниманию представляю mp3 плеер для сайта – Dewplayer, созданный французскими разработчиками.
Плеер поддерживает несколько режимов проигрывания:
Пути к файлам прописаны непосредственно в obiect. Один или более треков.
Пути к файлам прописаны в xml-файле. В дистрибутиве дан образец. Один или более треков.
Первый и второй методы могут быть использованы с поддержкой javascript. В этом случае необходима библиотека swfobject.js, которая также прилагается в дистрибутиве.
Настройка
Пути к файлам прописаны непосредственно в object
Если требуется загрузить несколько треков, то берем другой плеер (Multi) с переключателями треков и прописываем пути к файлам mp3 через прямую черту, без пробелов.
Пути к файлам прописаны в xml-файле
Данный способ удобно использовать для динамического создания больших плейлистов. Например если у вас на сайте много аудио-контента и вы решили предоставить пользователям прослушивание музыки в режиме онлайн. Если треков будет много, то прописывать через прямую черту - не вариант. Гораздо удобнее создать xml-файлы, причем для каждого юзера свой, вместо перечисления через pipe прописав лишь путь к плейлисту.
Контейнер - описание одного трека. Таких блоков может быть сколько угодно. Главное не пытайтесь в целях оптимизации выстроить xml в одну строку. Dewplaeyer для его разбора использует встроенную в Action-script библиотеку, и она при таком формате даст ошибку. Проверено.
Для отображения плейлиста есть специальный интерфейс плеера dewplayer-playlist.swf.
Где параметры showtime – показывать время, autoreplay – автоматический переход на следующий трек.
Dewplayer с поддержкой javascript
Создаем объект класса swfobject.js
Для обрашения к объекту разарботчики используют document.getElementById. Но этот способ работает не во всех браузерах. Я на практике использовал свою функцию.
Так надежнее. Далее получив по ID объект, получаем доступ к методам, експортируемым из Action-script и можем управлять плеером с помощью js-обработчиков. Вот их полный список:
Примеры вызова этих методов.
Точно работают методы play(),stop(),next(),prev(). Остальные не проверял. Более того, на практике, мне пришлось вообще пойти трудным путем. Обычные кнопки не подошли бы по дизайну. Я сделал следующее: взял плеер dewplayer.swf, из скиншота dewplayer-multi.swf сделал кнопки вперед-назад и слил все воедино. Таким образом, визуально, получился плеер dewplayer-multi.swf. А кнопки - обычные html элементы, на которые можно навесить любой обработчик js.
Но это еще не все. В связи с некоторыми потребностями пришлось с помощью очень полезной программы SWF Quicker, добавить несколько своих методов в swf-файл. Но это уже совсем другая история.
Mini Dewplayer (160x20) |
|
Classic Dewplayer (200x20) |
|
Multi Dewplayer (240x20) |
|
Multi Rect Dewplayer (240x20) |
|
Playlist Dewplayer (240x200) |
|
Bubble Dewplayer (250x65) |
|
Code
<object type="application/x-shockwave-flash" data="/demo/js/dewplayer/dewplayer.swf?mp3=/demo/js/dewplayer/mp3/test2.mp3" width="160" height="20" id="dewplayer-mini"> <param name="movie" value="/demo/js/dewplayer/dewplayer.swf?mp3=/demo/js/dewplayer/mp3/test2.mp3" /> </object>
Code
<object type="application/x-shockwave-flash" data="/demo/js/dewplayer/dewplayer-multi.swf?mp3=/demo/js/dewplayer/mp3/test1.mp3|/demo/js/dewplayer/mp3/test2.mp3|/demo/js/dewplayer/mp3/test3.mp3" width="240" height="20" id="dewplayer-multi"> <param name="movie" value="/demo/js/dewplayer/dewplayer-multi.swf?mp3=/demo/js/dewplayer/mp3/test1.mp3|/demo/js/dewplayer/mp3/test2.mp3|/demo/js/dewplayer/mp3/test3.mp3" /> </object>
Code
<?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <title>Ounage Playlist</title> <creator>Dew</creator> <link></link> <info></info> <image>/demo/js/dewplayer/covers/tracklist.jpg</image> <trackList> <track> <location>/demo/js/dewplayer/mp3/7.mp3</location> <creator>Bedrich Smetana</creator> <album>Má Vlast</album> <title>La Moldau (Vltava)</title> <annotation>I love this song</annotation> <duration>32000</duration> <image>/demo/js/dewplayer/covers/1.jpg</image> <info></info> <link></link> </track> </trackList> </playlist>
Code
<object type="application/x-shockwave-flash" data="/demo/js/dewplayer/dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"> <param name="movie" value="/demo/js/dewplayer/dewplayer-playlist.swf" /> <param name="flashvars" value="showtime=true&autoreplay=true&xml=/demo/js/dewplayer/playlist.xml" /> </object>
Code
<script type="text/javascript" src="/demo/js/dewplayer/swfobject.js"></script> <div id="dewplayer_content"> <object data="dewplayer.swf" width="200" height="20" name="dewplayer-js" id="dewplayer-js" type="application/x-shockwave-flash"> <param name="movie" value="dewplayer.swf" /> <param name="flashvars" value="mp3=/demo/js/dewplayer/mp3/7.mp3&javascript=on" /> <param name="wmode" value="transparent" /> </object> </div> <script type="text/javascript"> var flashvars = { mp3: "/demo/js/dewplayer/mp3/7.mp3", javascript: "on" }; var params = { wmode: "transparent" }; var attributes = { id: "dewplayer" }; swfobject.embedSWF("dewplayer.swf", "dewplayer-js", "200", "20", "9.0.0", false, flashvars, params, attributes); </script>
Code
<script type="text/javascript"> function getObj(objID){ if (document.getElementById) { return document.getElementById(objID); } else if (document.all) { return document.all[objID]; } else if (document.layers) { return document.layers[objID]; } } </script>
Code
<script type="text/javascript"> function play() { var dewp = getObj("dewplayer"); if(dewp) dewp.dewplay(); } function stop() { var dewp = getObj("dewplayer"); if(dewp) dewp.dewstop(); } function pause() { var dewp = getObj("dewplayer"); if(dewp) dewp.dewpause(); } function next() { var dewp = getObj("dewplayer"); if(dewp) dewp.dewnext(); } function prev() { var dewp = getObj("dewplayer"); if(dewp) dewp.dewprev(); } function set(file) { var dewp = getObj("dewplayer"); if(dewp) { dewp.dewset(file); } } function go(index) { var dewp = getObj("dewplayer"); if(dewp) { dewp.dewgo(index); } } function setpos(ms) { var dewp = getObj("dewplayer"); if(dewp) { dewp.dewsetpos(ms); } } function getpos() { var dewp = getObj("dewplayer"); if(dewp) { alert(dewp.dewgetpos()); } } function volume(val) { var dewp = getObj("dewplayer"); if(dewp) { alert(dewp.dewvolume(val)); } } </script>
Code
<input type="button" onclick="play();" value="Play" /> <input type="button" onclick="stop();" value="Stop" /> <input type="button" onclick="pause();" value="Pause" /> <input type="button" onclick="next();" value="Next" /> <input type="button" onclick="prev();" value="Prev" /> <input type="button" onclick="go(2);" value="Go(2)" />
<input type="button" onclick="set('mp3/test2.mp3');" value="Set mp3" /> <input type="button" onclick="set('mp3/test3.mp3');" value="Set another mp3" /> <input type="button" onclick="setpos(10000);" value="Set position 10 sec" /> <input type="button" onclick="getpos();" value="Get position" /> <input type="button" onclick="volume(50);" value="Set volume 50%" />
<input type="button" onclick="set('mp3/test2.mp3');" value="Set mp3" /> <input type="button" onclick="set('mp3/test3.mp3');" value="Set another mp3" /> <input type="button" onclick="setpos(10000);" value="Set position 10 sec" /> <input type="button" onclick="getpos();" value="Get position" /> <input type="button" onclick="volume(50);" value="Set volume 50%" />
Вы сейчас просматриваете mp3 плеер для сайта Dewplayer. Данный файл находится в категории Flash mp3 плееры. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Flash mp3 плееры. Для того чтобы скачать mp3 плеер для сайта Dewplayer нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл mp3 плеер для сайта Dewplayer и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.
| Всего комментариев: 0 | |
