Сегодня мы будем делать HTML5 плеер для сайта.
Какие технологии нам понадобятся?
1. PHP - для написания ядра серверной части, ядро будет отвечать за то какой файл воспроизводить.
2. HTML - создание интерфейса, блочные элементов.
3. CSS - все должно быть красиво, по этому будем делать эффекты.
4. jQuery - библиотека нам понадобится для создания обработчиков событий для HTML элементов.
5. Иконки - иконки для создания красивого интерфейса.
6. База данных - понадобится для хранения списка музыкальных файлов.
Приступим.
Начнем с простого, какие картинки мы будем использовать
<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
После всех данных манипуляций у нас должно получится нечто такое
В принципе смотрится не плохо. Теперь надо оживить все элементы. Для этого напишим
обработчики событий для всех элементов. Будем использовать JavaScript с подключенной библиотекой jQuery.
создадим файл radio.js
Собственно после того как описаны все события Играть/Остановить/Тише/Громче можно приступить к написанию файла 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 запрос к скрипту, который повторяет все ранее сказанное.
Надеюсь статья подскажет вам правильнео решение для себя.
Какие технологии нам понадобятся?
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; }
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");
});
});
//Когда проигрывание закончилось
$(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 запрос к скрипту, который повторяет все ранее сказанное.
Надеюсь статья подскажет вам правильнео решение для себя.
Комментариев нет:
Отправить комментарий