Dewplayer, mp3 плеєр для сайту, flash плеєр з підтримкою javascript і xml
- Mini Dewplayer (160x20)
- Налаштування
- Шляхи до файлів прописані в xml-файлі
- Dewplayer з підтримкою javascript
Вашій увазі пропонується mp3 плеєр для сайту - Dewplayer, створений французькими розробниками. На жаль на офіційному сайті,, дана лише коротка інформація. По всій видимості все інше входить в платну підтримку продукту. Але, тим не менш, варто відзначити титанічну працю розробників і сказати спасибі. У природі існує mp3 і video версії. Сьогодні стаття присвячується mp3 - плеєра. Dewplayer виконаний на flash, у вигляді swf - файлів. Вбудовується в web - сторінку тегом object. Має кілька різних інтерфейсів:
Mini Dewplayer (160x20)
Classic Dewplayer (200x20)
Multi Dewplayer (240x20)
Multi Rect Dewplayer (240x20)
Playlist Dewplayer (240x200)
Bubble Dewplayer (250x65)
завантажити Dewplayer
Плеєр підтримує кілька режимів програвання:
- Шляхи до файлів прописані безпосередньо в obiect. Один або більше треків.
- Шляхи до файлів прописані в xml-файлі. У дистрибутиві даний зразок. Один або більше треків.
- Перший і другий методи можуть бути використані з підтримкою javascript. У цьому випадку необхідна бібліотека swfobject.js, яка також додається в дистрибутиві.
Налаштування
Шляхи до файлів прописані безпосередньо в object
<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>Якщо бажаєте зберегти кілька треків, то беремо інший плеєр (Multi) з перемикачами треків і прописуємо шляху до файлів mp3 через пряму лінію, без пробілів.
<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>Шляхи до файлів прописані в xml-файлі
Даний спосіб зручно використовувати для динамічного створення великих плейлистів. Наприклад якщо у вас на сайті багато аудіо-контенту і ви вирішили надати користувачам прослуховування музики в режимі онлайн. Якщо треків буде багато, то прописувати через пряму лінію - не варіант. Набагато зручніше створити xml-файли, причому для кожного користувача свій, замість перерахування через pipe прописавши лише шлях до списку Параметри.
<? 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>Контейнер - опис одного трека. Таких блоків може бути скільки завгодно. Головне не намагайтеся з метою оптимізації вибудувати xml в один рядок. Dewplaeyer для його розбору використовує вбудовану в Action-script бібліотеку, і вона при такому форматі дасть помилку. Перевірено.
Де параметри showtime - показувати час, autoreplay - автоматичний перехід на наступний трек.
Dewplayer з підтримкою javascript
Створюємо об'єкт класу swfobject.js
<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>Для обрашения до об'єкта разарботчікі використовують document.getElementById. Але цей спосіб працює не у всіх браузерах. Я на практиці використовував свою функцію.
<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>Так надійніше. Далі отримавши по ID об'єкт, отримуємо доступ до методів, експортіруемим з Action-script і можемо управляти плеєром за допомогою js-обробників. Ось їх повний список:
<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>Приклади виклику цих методів.
<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)" /> <br /> <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%" />Точно працюють методи play (), stop (), next (), prev (). Решта не перевіряв. Більш того, на практиці, мені довелося взагалі піти важким шляхом. Звичайні кнопки не підійшли б по дизайну. Я зробив наступне: взяв плеєр dewplayer.swf, з скіншота dewplayer-multi.swf зробив кнопки вперед-назад і злив все воєдино. Таким чином, візуально, вийшов плеєр dewplayer-multi.swf. А кнопки - звичайні html елементи, на які можна навісити будь-обробник js.
Але це ще не все. У зв'язку з деякими потребами довелося за допомогою дуже корисною програми SWF Quicker, додати кілька своїх методів в swf-файл. Але це вже зовсім інша історія.
Swf?Swf?
Swf?
Swf?
Lt;?
Quot; encoding = "UTF-8"?