www.Litecode.ru – Сборник рецептов для создания сайтов

MP3 плеер для сайта Dewplayer

ГлавнаяFlash → MP3 плеер для сайта Dewplayer

mp3 flash playerВашему вниманию представляется mp3 плеер для сайта – Dewplayer, созданный французскими разработчиками. К сожалению на официальном сайте, http://www.alsacreations.fr/dewplayer.html, дана лишь краткая информация. По всей видимости все остальное входит в платную поддержку продукта. Но, тем не менее, стоит отметить титанический труд разработчиков и сказать спасибо. В природе существует 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

Плеер поддерживает несколько режимов проигрывания:

  1. Пути к файлам прописаны непосредственно в obiect. Один или более треков.
  2. Пути к файлам прописаны в xml-файле. В дистрибутиве дан образец. Один или более треков.
  3. Первый и второй методы могут быть использованы с поддержкой 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 библиотеку, и она при таком формате даст ошибку. Проверено.

Для отображения плейлиста есть специальный интерфейс плеера dewplayer-playlist.swf.

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

Где параметры 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-файл. Но это уже совсем другая история.