Jump to content
I-NOZex

[Opinião] Bom music player com API javascript

Recommended Posts

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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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

  • Vote 1

Share this post


Link to post
Share on other sites
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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 :D

Edited by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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.


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
I-NOZex

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

alguma sugestao?


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.