[Opinião] Bom music player com API javascript

[I-NOZex]

Bem antes demais não sei bem se vou colocar isto no sitio correcto, mas é uma qestão um pouco vaga

Gostaria que me dessem sugestões de music players com uma boa API javascript para controlar o player, e com possibilidade de skins

tenho trabalhado com o JWPLAYER e ate estou bem contente, mas qeria algo mais virado para HTML5, embora ele suporte, queria

outras sugestoes e feedbacks.

Fiz uma pesquisa e este pareceu-me interessante, preenchendo os requisitos que preciso...

http://mediaelementjs.com/

De lembrar que o player é para reproduzir musicas de uma fonte de stream +- directo, e a maioria no formato mp3 (o endereço que vou usar o jwplayer 6 não o suporta, tenho trabalhado com o 5.9x)

Obrigado (:

PS: tenho preferencia por um player que tenha api propria ou para o fallback use jQuery, não qeria incluir mais bibliotecas JS senão essa...

Edited June 12, 2013 at 05:48 PM by I-NOZex

[yoda]

Tens este para jQuery : http://jplayer.org/

[I-NOZex]

continuei a minha pesquisa e vi este:

http://www.speakker.com/

confesso que era algo assim que tenho em mente

a ideia é ser um player tipo barra, acopolado ao topo da pagina, por baixo da barra de menu, mas ainda vou explorar esse jplayer

preciso de algo com controlo por js, com skins, reproduza mp3, suporte playlists (por ficheiro xml ou algo do genero) e que tente ser o mais html5 possivel (crossbrowser, do IE9 para cima, se nao suportar anteriores é irrelevante)

edit: as sorces originais sao mp3 mas quando é feita a reproduçao directa ele usa ficheiros mp4 (provavelmente m4a acho eu)

Edited June 12, 2013 at 06:52 PM by I-NOZex

[I-NOZex]

testei o media elements, jPlayer e audio.js e todos apresentam o mesmo problema: não conseguem saber atempadamente a duraçao do ficheiro, impossibilitanto assim a navegação pela seekbar :\

em jwplayer, pelo menos em flash, consigo...

Edited June 12, 2013 at 07:04 PM by I-NOZex

[yoda]

testei o media elements, jPlayer e audio.js e todos apresentam o mesmo problema: não conseguem saber atempadamente a duraçao do ficheiro, impossibilitanto assim a navegação pela seekbar :\

em jwplayer, pelo menos em flash, consigo...

E a imaginação? http://de.php.net/manual/en/refs.utilspec.audio.php

[I-NOZex]

E a imaginação? http://de.php.net/manual/en/refs.utilspec.audio.php

ahaha, tens razao, mas ja agora, qual dessas classes/funçao usar para saber a duraçao total?

mas ainda assim... n sei se vai resultar... será que se definir (e se der) a duraçao manualmente, ele depois consegue fazer seeking? ;\

[yoda]

Consegues com o PHP saber a duração de um ficheiro (tem apenas em atenção os formatos suportados) ... para dar suporte a alguns formatos é preciso certos privilégios na máquina, o que normalmente só consegues com VM no mínimo.

[I-NOZex]

Consegues com o PHP saber a duração de um ficheiro (tem apenas em atenção os formatos suportados) ... para dar suporte a alguns formatos é preciso certos privilégios na máquina, o que normalmente só consegues com VM no mínimo.

e o tempo de processamento para obter esses dados, não será demasiado?

mas, nao fiquei exclarecido nas outras perguntas, dá sequer para dizer no player a duração? e se der e eu lhe meter uma duração, ele vai fzr a seeking na barra como deve de ser? (saber a posição actual da musica)

os ficheiros não serão armazenados no servidor, mas serão armazenados dados como o tamanho em MB e a duração, logo nem é bem necessario usar o php para saber tal, pois eu penso que ja tentei e com as fontes que tenho do ficheiro, não o é possivel...

Edited June 13, 2013 at 10:46 AM by I-NOZex

[I-NOZex]

no jPlayer nao deixa definir a duração, vi um post com um problema semelhante e a minha fonte dos ficheiros é um transcoding para mp3 "on the fly", dai não enviar metadados como a duração do ficheiro :|

acho que tanta coisa e vou continuar com o jwplayer, mas se alguem souber de um em html5 que supere este problema que diga

alguma sugestão perante isto yoda?

edit: do que vi e entendi, isto parece ser uma limitação do html5... não haverá mesmo soluçao? :\

Edited June 13, 2013 at 06:44 PM by I-NOZex

[yoda]

Já te dei a resposta, usa PHP para determinar aquilo que precisas dos ficheiros, no javascript basta recolher esses dados. É a imaginação que está aqui em causa, se não tens software à tua medida, cria tu, mas eu acho que há muita coisa que podes usar já feita que é só adaptar.

[I-NOZex]

tipo isto aqui: https://groups.google.com/d/msg/jplayer/nSM2UmnSKKA/Sv57ldVWuHQJ

pelo que vi funciona, mas eu tou a usar ficheiros remotos, num outro servidor alheio ao do de alojamento, a verdade é que fiz algumas adaptaçoes assim so esboço, usei o cUrl para obter o tamanho do ficheiro e assim, o player aparece e assim mas nao toca :\ ta aqui o codigo:

$filename=$_GET['filename'];
$location=$filename;

	$mimeType = "video/mp4";

$ch = curl_init($location);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$data = curl_exec($ch);
curl_close($ch);
if ($data === false) {
 header ("HTTP/1.1 505 Internal server error");
 exit;
}

if (preg_match('/Content-Length: (\d+)/', $data, $matches)) {
 $size = (int)$matches[1];
}

$fm = @fopen($location, 'rb');
if (!$fm)
{
	header ("HTTP/1.1 505 Internal server error");
	return;
}
$begin	= 0;
$end	= $size - 1;
if (isset($_SERVER['HTTP_RANGE']))
{
	if (preg_match('/bytes=\h*(\d+)-(\d*)[\D.*]?/i', $_SERVER['HTTP_RANGE'], $matches))
	{
		$begin	= intval($matches[1]);
		if (!empty($matches[2]))
		{
			$end	= intval($matches[2]);
		}
	}
}
if (isset($_SERVER['HTTP_RANGE']))
{
	header('HTTP/1.1 206 Partial Content');
}
else
{
	header('HTTP/1.1 200 OK');
}
header("Content-Type: application/octet-stream");
header("Content-Type: $mimeType");
header('Cache-Control: public, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Accept-Ranges: bytes');
header('Content-Length:' . (($end - $begin) + 1));
if (isset($_SERVER['HTTP_RANGE']))
{
	header("Content-Range: bytes ".$begin-$end/$size);
}
header("Content-Disposition: inline; filename=$filename");
header("Content-Transfer-Encoding: binary");
header("Last-Modified: ".time());
$cur	= $begin;
fseek($fm, $begin, 0);
while(!feof($fm) && $cur <= $end && (connection_status() == 0))
{
	print fread($fm, min(1024 * 16, ($end - $cur) + 1));
	$cur += 1024 * 16;
}

e não é tudo tao trivial como estás a achar, pelo menos do que eu tou a entender.

o jPlayer e a maioria não permite atribuição directa da duração do ficheiro, logo essa ideia vai pelo ar :\ ele vai buscar esses dados atraves de metadados e headers... não tou a ver soluçoes :S é que queria deixar em HTML5 o site e se não resolver este problema... bem é uma caliqueira 😄

Edited June 13, 2013 at 07:57 PM by I-NOZex

[yoda]

Qual é a tua intenção em obter a duração do ficheiro? Queres apresentar essa informação apenas? E esses ficheiros (externos), são mesmo ficheiros de áudio? Ou é stream?

[I-NOZex]

são ficheiros de audio mas fornecidos por streaming, porque sao reproduzidos com transcoding on-the-fly

a informação é apenas para o player, para mostrar o tempo, e a seekbar funcionar como deve de ser...

ja verifiquei a mimetype desses ficheiros e é video/mp4, embora seja só audio.

[yoda]

Se é stream dependes da informação que vem do servidor, o que é que é retornado?

[I-NOZex]

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Date: Fri, 14 Jun 2013 18:37:03 GMT
Content-Length: 1032107
Accept-Ranges: none
Cache-Control: no-cache
Pragma: no-cache
Content-Encoding: gzip
Connection: close

é esse o cabeçalho de resposta

mas é que com flash, ele apresenta a duração bem :S mesmo num media player do pc, tipo WMP, ele tem a duraçao ok, e a seeking tambem... eu acho que isto trabalhando com o php é capaz de dar so não tou a ver bem ao certo, pois eu encontro montes de exemplos mas é para ficheiros que tao no mesmo servidor do site :S

[yoda]

Não li muito sobre o assunto, mas investiga esta função (e similares) : http://php.net/manual/en/function.stream-get-meta-data.php

Vê também isto : http://ryangantt.com/stream/

Edited June 14, 2013 at 08:21 PM by yoda

[I-NOZex]

olha agora fiquei mesmo completamente, epah nao sei o que aconteceu, isto nem era suposto funcionar!!!

$filename='http://www45.zippyshare.com/downloadMusic?key=22922687';
//$filename=$_GET['filename'];
   $location=$filename;


   $remoteFile = $location;
$ch = curl_init($remoteFile);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); //not necessary unless the file redirects (like the PHP example we're using here)
$data = curl_exec($ch);
curl_close($ch);
if ($data === false) {
 echo 'cURL failed';
 exit;
}

$size = 'unknown';

if (preg_match('/Content-Length: (\d+)/', $data, $matches)) {
 $size = (int)$matches[1];
 //die(var_dump($data));
}

$shortlen =$size-1;

header("Pragma: public");
header("Expires: 0");
header("Content-Type: video/mp4");
header('Content-Length: ' . $size);
header('Content-Disposition: inline; filename="'.$filename.'"');
header( 'Content-Range: bytes 0-'.$shortlen.'/'.$size);
header( 'Accept-Ranges: bytes');
header('X-Pad: avoid browser bug');
header('Cache-Control: no-cache');
// header('Etag: ' . $etag);
 readfile($filename);

testei isso agora e ta a funcionar nao sei bem por alma de quem o.o

achas que tá certo? se puderes ajudarme a corrigir...

Edited June 14, 2013 at 08:35 PM by I-NOZex

[I-NOZex]

algum hint?

[I-NOZex]

bem, decidi re-pegar no codigo, e desta feita, verifiquei que o mesmo ja nao funciona :\

alguma sugestao?