PHP. Делаем просто аудиоплеер для своего сайта

Сегодня мы будем делать HTML5 плеер для сайта.

Какие технологии нам понадобятся?
1. PHP   - для написания ядра серверной части, ядро будет отвечать за то какой файл воспроизводить.
2. HTML - создание интерфейса, блочные элементов.
3. CSS - все должно быть красиво, по этому будем делать эффекты.
4. jQuery - библиотека нам понадобится для создания обработчиков событий для HTML элементов.
5. Иконки - иконки для создания красивого интерфейса.
6. База данных - понадобится для хранения списка музыкальных файлов.

Приступим.

Начнем с простого, какие картинки мы будем использовать
- так будет выглядеть индикация загрузки трека до момента воспроизведения(signal.gif)


- так будет выглядеть в момент воспроизведения аудио файла



- стрелки регулирования громкости, тише/громче(Volume_up.png/Volume_down.png)


- так будет выглядеть в момент простоя(Play.png)

Картинки кинем в папку img
С картинками определились, теперь нужно используя HTML подготовить макет для нашего плеера:
index.html
<div id='radio'  >
    <img src='img/play.png' data-state='stop' id='btnPlay' width='44' height='44'class='onmouse hover' data-tooltip='Слушать музыку'>
        <div id='radio_volume'>
            <img src='img/volume_up.png' data-state='volume_up' id='btnVolumeUp' width='16' height='21'class='onmouse hover' data-tooltip='Громче'>
            <img src='img/volume_down.png' data-state='volume_down' id='btnVolumeDown' width='16' height='21'class='onmouse hover'  data-tooltip='Тише'>
        </div>
    <label id='radio_caption'>Радио!</label>
    <div id='volume_caption'>10</div>
    <audio id='player' class='player' src='' load='metadata' preload='metadata'></audio>
</div>


Когда разметка готова необходимо занятся CSS разметкой и привести все в порядок.
style.css
#radio{   width:65px;   position:relative;   right:0px;   top:0px;   display:block;   float:right;    z-index:10;
    border:1px solid black;   padding:0 0 0 16px;   border-radius:5px;   background-color:#8A8A8A;
}
#radio img{   cursor:pointer;}

#radio_caption{   position:absolute;   left:-34px;   top:16px;   width:100%;       text-align:center;

 font-family:Tahoma,Verdana,Arial,sans-serif;    font-size:12px;    line-height:12px;    color:#fff;
    -webkit-transform: rotate(270deg);    transform: rotate(270deg);        }

#volume_caption{    display:none;    position:absolute;    left:28px;    top:16px;
    width:20px;    text-align:center;   font-family:Tahoma,Verdana,Arial,sans-serif;   font-size:12px;
    line-height:12px;    color:#000;}

#radio_volume{    position:relative;    float:right;    width:17px;}

#spanup{    position:absolute;    left:47%;        top:98px;    width:32px;    height:10px;
    cursor:pointer;    background-color:#D1E6FC;
}

#arrowupdown{    position:absolute;    top:0px;    width:32px;    height:10px;    }

После всех данных манипуляций у нас должно получится нечто такое
В принципе смотрится не плохо. Теперь надо оживить все элементы. Для этого напишим
обработчики событий для всех элементов. Будем использовать JavaScript с подключенной библиотекой jQuery.

создадим файл radio.js
 $(document).ready(function() {       
        //Когда проигрывание закончилось
     $(document).on("click","#btnPlay",function(e) {
            if($(this).attr('data-state')=='stop'){
                $("#btnPlay").attr('src','img/signal.gif');
                $("#btnPlay").attr('data-state','play');               
                $("#hovertitle").hide();
                $.ajax({
                    type:'POST',
                    url:'radio.php',                   
                    async:true,
                    success:function(data){           
                        $("#btnPlay").attr('src','img/stop.gif');
                        $("audio").attr('src',data);
                        $("audio").attr('load','metadata');
                        $("audio").trigger('play');                       
                    },
                    error:function(xhr,str){                       
                    }
                });
               
            }
            else{
                if($(this).attr('data-state')=='play'){
                    $("audio").trigger('pause');
                    $("#btnPlay").attr('data-state','stop');
                    $("#btnPlay").attr('src','img/play.png');                   
                }   
            }           
       });
        $("audio").bind("ended",function(){
            //Получить новый файл и запустить проигрывание
            $("#btnPlay").attr('src','img/signal.gif');
            //var song=$.ajax({url:"radio.php",async:false}).responseText;
            $.ajax({
                type:'POST',
                url:'radio.php',                   
                async:true,
                success:function(data){           
                    $("#btnPlay").attr('src','img/stop.gif');
                    $("audio").attr('src',data);
                    $("audio").attr('load','metadata');
                    $("audio").trigger('play');                       
                },
                error:function(xhr,str){                       
                }
            });           
        });

        $("audio").bind("error",function(){
            //Получить новый файл и запустить проигрывание
        });
        $("audio").bind("loadedmetadata",function(){
            //Получить новый файл и запустить проигрывание
           
        });
       
        $(document).on("click","#btnVolumeUp",function(e) {
            var player=document.getElementById("player");
            player.volume+=0.1;
            var textv=Math.floor(player.volume*100);
            $("#volume_caption").text(textv);
            $("#volume_caption").fadeIn("slow");
            $("#volume_caption").fadeOut("slow");
           
        });
        $(document).on("click","#btnVolumeDown",function(e) {
            var player=document.getElementById("player");
            player.volume-=0.1;
            var textv=Math.floor(player.volume*100);
            $("#volume_caption").text(textv);
            $("#volume_caption").fadeIn("slow");
            $("#volume_caption").fadeOut("slow");           
        });
       
        $("audio").bind("canplaythrough",function(){
            var textv=this.duration;
            textv=((Math.floor(textv / 60) - (Math.floor(textv / 3600) * 60)) + ":" + Math.floor(textv % 60));           
            $("#volume_caption").text(textv);
            $("#volume_caption").fadeIn("slow");
            $("#volume_caption").fadeOut("slow");                       
        });
       
  });

Собственно после того как описаны все события Играть/Остановить/Тише/Громче можно приступить к написанию файла radio.php который будет возвращать файлы
но для того что бы у нас должна быть таблица откуда мы будем что то возвращать

сам radio.php

<?php
//Путь к музыке лежит по пути http://xxxxxx/radio/music/
$path='radio/music/';
$base='myradio';
$server='localhost';
$db=@mysql_connect($server,'root','');
mysql_select_db($base);
mysql_query('SET NAMES utf8');
$sql="select * from playlist where myfile like '%.mp3' ORDER BY RAND() LIMIT 1";
do {   
    $result=mysql_query($sql);
    if(mysql_num_rows($result)==0)exit();//Если таблица пуста то выходим   
    $line=mysql_fetch_array($result);   
    $filename=$path.$line['dirname'].$line['myfile'];    //Сформируем путь к файлам
}while(!file_exists($_SERVER['DOCUMENT_ROOT'].'/'.$filename));
$ser=$_SERVER['SERVER_ADDR'];
if($ser=='::1')$ser='127.0.0.1';
//на выходе имеем путь к mp3 файлу http://xxxxxx/radio/music/path*.mp3
print 'http://'.$ser.'/'.$filename;
?>

предполагается что у нас есть база myradio
в которой есть таблица playlist
поля таблицы
id ; dirname; myfile

где id - уникальный код файла

dirname это пусть относительно radio/music/ к файлу
пример album/myalbum/
тоесть файл должен лежать radio/music/album/myalbum/

myfile - хранит имя исполнимого файла
пример file.mp3

Пример записи
1 ; album/myalbum/ ; file1.mp3
2 ; album/myalbum2/ ; file2.mp3
3 ; album/myalbum2/ ; file3.mp3
4 ; album/myalbum/new/ ; file5.mp3

Собственно на этом и все.
Логика такова:
При клике мышкой по плееру происходит ajax запрос к скрипту radio.php который в свою очередь выбирает случайную запись из таблицы с файлами, после чего передает браузеру путь к выбранному файлу, далее объект <audio> получает ссылку на файл, где javascript стартует на воспроизведение. Как только воспроизведение завершено, снова повторяется ajax запрос.
Если пользователь отсанавливает воспроизведение, то при повторном запуске, снова повторяется ajax запрос к скрипту, который повторяет все ранее сказанное.

Надеюсь статья подскажет вам правильнео решение для себя.


Комментариев нет:

Отправить комментарий