Нужен музыкальный плеер для сайта

[sergei_bratishev]

Привет всем

делаю сайт, для него надо плеер. сайт будет музыкальный, поэтому то какой будет плеер важно вдвойне. подскажите какой плеер лучше использовать, или возможно знаете как сделать свой плеер, то вы сделаете меня вдвойне счастливей :tongue:

p.s. сейчас пробую jPlayer, но проблема в том что он очень сайт тормозит, поэтому ищу другой. но если кто то знает как исправить данные тормоза, то оставлю его
p.p.s. все это делаю на localhost, может поэтому тормозит?

 

[BaNru]

flowplayer

 

[sergei_bratishev]

flowplayer

а это разве и музыкальный плеер? hmy:

 

[BaNru]

да

 

[Volter9]

А на HTML5 тэг <audio> не подойдет?
(http://www.w3schools.com/html5/html5_audio.asp)

 

[sergei_bratishev]

А на HTML5 тэг <audio> не подойдет?
(http://www.w3schools...html5_audio.asp)

а этому плееру HTML5 можно свой дизайн приделать как нибудь???

 

[Volter9]

А на HTML5 тэг <audio> не подойдет?
(http://www.w3schools...html5_audio.asp)

а этому плееру HTML5 можно свой дизайн приделать как нибудь???

Почему и нет? Делаем отдельный див, стилизируем его, далее для тэга <audio> делаем так: style="display: none;", ну а далее через JS на onclick делаем плей и менаем стиль кнопки.

Вообщем:

<style type="text/css">
.class {
  padding: 5px;
  margin: 5px;
  border: 1px solid #000;
  border-radius: 5px;
  background: #aaa;
}

.play {
  padding: 5px;
  margin: 5px;
  border: 1px solid #777;
  border-radius: 5px;
  background: #eee;
}
</style>
// ...
<audio style="display: none;" id="player">
<source src="music.mp3" type="audio/mp3" />
<source src="music.ogg" type="audio/ogg" />
<source src="music.wav" type="audio/wav" />
Браузер не поддерживает HTML5
</audio>
<div class="player">
<span class="play" id="play">Играть</span>
</div>
// ...
<script type="text/javascript">
var play = 0;
var player = document.getElementById("player");

var button = document.getElementById("play");

button.onclick = function() {
  if(play == 0) {
   player.play();
  }
  else if(play == 1) {
   player.pause();
  }
};
</script>

Если что-то не правильно поправьте.

 

[sergei_bratishev]

А на HTML5 тэг <audio> не подойдет?
(http://www.w3schools...html5_audio.asp)

а этому плееру HTML5 можно свой дизайн приделать как нибудь???

Почему и нет? Делаем отдельный див, стилизируем его, далее для тэга <audio> делаем так: style="display: none;", ну а далее через JS на onclick делаем плей и менаем стиль кнопки.

Вообщем:

<style type="text/css">
.class {
padding: 5px;
margin: 5px;
border: 1px solid #000;
border-radius: 5px;
background: #aaa;
}

.play {
padding: 5px;
margin: 5px;
border: 1px solid #777;
border-radius: 5px;
background: #eee;
}
</style>
// ...
<audio style="display: none;" id="player">
<source src="music.mp3" type="audio/mp3" />
<source src="music.ogg" type="audio/ogg" />
<source src="music.wav" type="audio/wav" />
Браузер не поддерживает HTML5
</audio>
<div class="player">
<span class="play" id="play">Играть</span>
</div>
// ...
<script type="text/javascript">
var play = 0;
var player = document.getElementById("player");

var button = document.getElementById("play");

button.onclick = function() {
if(play == 0) {
player.play();
}
else if(play == 1) {
player.pause();
}
};
</script>

Если что-то не правильно поправьте.

а с этим плеером можно плейлист создать?

 

[Volter9]

А на HTML5 тэг <audio> не подойдет?
(http://www.w3schools...html5_audio.asp)

а этому плееру HTML5 можно свой дизайн приделать как нибудь???

Почему и нет? Делаем отдельный див, стилизируем его, далее для тэга <audio> делаем так: style="display: none;", ну а далее через JS на onclick делаем плей и менаем стиль кнопки.

Вообщем:

<style type="text/css">
.class {
padding: 5px;
margin: 5px;
border: 1px solid #000;
border-radius: 5px;
background: #aaa;
}

.play {
padding: 5px;
margin: 5px;
border: 1px solid #777;
border-radius: 5px;
background: #eee;
}
</style>
// ...
<audio style="display: none;" id="player">
<source src="music.mp3" type="audio/mp3" />
<source src="music.ogg" type="audio/ogg" />
<source src="music.wav" type="audio/wav" />
Браузер не поддерживает HTML5
</audio>
<div class="player">
<span class="play" id="play">Играть</span>
</div>
// ...
<script type="text/javascript">
var play = 0;
var player = document.getElementById("player");

var button = document.getElementById("play");

button.onclick = function() {
if(play == 0) {
player.play();
}
else if(play == 1) {
player.pause();
}
};
</script>

Если что-то не правильно поправьте.

а с этим плеером можно плейлист создать?

Почему бы и нет?)

Элементарно, Ватсон. © (Шерлок Холмс)
Только тут прийдется велосипед прикручивать)

А вы в каком формате хотите плейлист: CSV, JSON, XML, SQL или какой-нибудь любой?

 

[sergei_bratishev]

А вы в каком формате хотите плейлист: CSV, JSON, XML, SQL или какой-нибудь любой?

честно сказать я не вот в этом не очень разбираюсь) просто хочу небольшой сайтик с музыкой сделать, но хочу что бы плеер был на 5+, и вот мне бы совет нужен что конкретно подучить что бы его сделать :tongue: если сможешь прислать и ссылку как сделать Плейлист то буду в двойне признателен

p.s. я если попробовал поработать с кодом который ты мне прислал, и не смог даже кнопку паузы сделать, не то что уж там громкость, или перелистывание песен :blush:

вот например, если я приписываю к твоему коду этот код:

var button = document.getElementById("pause");
pause.onclick = function() {
var play = 1;
}

(ну естественно еще тег спан и стили)

то после этого кода, у меня и плей перестает работать, почему? ведь play = 1, только когда нажмешь на кнопку паузы?

 

[lekzd]

p.s. я если попробовал поработать с кодом который ты мне прислал, и не смог даже кнопку паузы сделать, не то что уж там громкость, или перелистывание песен

вы мало сидели над этим, примерно года 2,5-3 назад как браузер Safari первым объявил, что поддерживает HTML 5 audio и video, я просидел за этим около недели, после работы клепая свой собственный видеоплеер

 

[Volter9]

А вы в каком формате хотите плейлист: CSV, JSON, XML, SQL или какой-нибудь любой?

честно сказать я не вот в этом не очень разбираюсь) просто хочу небольшой сайтик с музыкой сделать, но хочу что бы плеер был на 5+, и вот мне бы совет нужен что конкретно подучить что бы его сделать :tongue: если сможешь прислать и ссылку как сделать Плейлист то буду в двойне признателен

p.s. я если попробовал поработать с кодом который ты мне прислал, и не смог даже кнопку паузы сделать, не то что уж там громкость, или перелистывание песен :blush:

вот например, если я приписываю к твоему коду этот код:

var button = document.getElementById("pause");
pause.onclick = function() {
var play = 1;
}

(ну естественно еще тег спан и стили)

то после этого кода, у меня и плей перестает работать, почему? ведь play = 1, только когда нажмешь на кнопку паузы?

Простите, я был немного намудрил там будет только играть, а на паузу не будет выходить, так что вот код:
(I'm So Sorry :blush

<style type="text/css">
.class {
padding: 5px;
margin: 5px;
border: 1px solid #000;
border-radius: 5px;
background: #aaa;
}
.play {
padding: 5px;
margin: 5px;
border: 1px solid #777;
border-radius: 5px;
background: #eee;
}
</style>
// ...
<audio style="display: none;" id="player">
<source src="music.mp3" type="audio/mp3" />
<source src="music.ogg" type="audio/ogg" />
<source src="music.wav" type="audio/wav" />
Браузер не поддерживает HTML5
</audio>
<div class="player">
<span class="play" id="play">Играть</span>
</div>
// ...
<script type="text/javascript">
var play = 0;
var player = document.getElementById("player");
var button = document.getElementById("play");
button.onclick = function() {
if(play == 0) {
player.play();
play = 1;
}
else if(play == 1) {
player.pause();
play = 0;
}
};
</script>

 

[sergei_bratishev]

это понятно) но мне интересно как на отдельную кнопку вывести паузу, и как делать кнопку стоп, полосу громкости, лоадбар?
и не стоит извиняться

и как сделать плейлист?)

 

[Volter9]

Что б сделать Плейлист нужен набор данных, вроде выше описанных, их нужно парсить, и получать набор музыкальных файлов.
По этому и спрашиваю какой вас формат данных интересует?

 

[sergei_bratishev]

Ну я в данных форрматах не очень разбераюсь. Ну БД у меня MySql. Ну давай тогда SQL

 

[Volter9]

Ок, тогда попробую что-нибудь придумать)

 

[sergei_bratishev]

Ок, тогда попробую что-нибудь придумать)

Спасибо большое

 

[sergei_bratishev]

Ок, тогда попробую что-нибудь придумать)

ну что, ты не придумал еще не каких вариантов?)

 

[Volter9]

Ок, тогда попробую что-нибудь придумать)

ну что, ты не придумал еще не каких вариантов?)

Говорю что в школе) А вообще там все банально просто: через пхп, создаешь в JS array ("name" => "name", "file" => "http://i.tak/poehali.mp3"); далее из этого arra'я создаешь в отдельном диве под плеером, другие дивы через documen.createElement, или как-то так, далее на onclick у тех дивов которых ты создал ты меняешь у тега source который находится в плеере меняешь src, ну и делаешь вроде стоп.

Если будет время скину код.

 

[sergei_bratishev]

Если будет время скину код.

окей) спасибо)