Criar um Player de Áudio personalizado

Durante este tutorial vou introduzir-vos ao áudio em HTML5 e mostrar como podem criar o vosso próprio player.

Se preferir pode ver o produto final HTML5 Audio Player no Mercado da Envato. Com este player, é possível criar listas de reprodução (playlists) a partir de várias fontes e as opções de personalização são imensas.

Pode também encontrar muitos exemplos de HTML5 no Envato Studio

Introdução

Até ao momento, implementar áudio num website era um processo complicado e que dependia inteiramente de plugins como o Flash. Uma vez que o iPhone não aceita plugins e que a Adobe mencionou que não vai mais suportar o Flash para dispositivos móveis, muitos programadores estão à procura de outras opções para incorporar áudio nos seus projetos.  É aqui que o áudio HTML5 entra em acção para resolver o problema.

Embora o HTML5 seja o standard para a reprodução de ficheiros de áudio na web, ainda está numa fase muito inicial e tem um longo caminho pela frente até que seja capaz de fornecer tudo o que os outros plugins como o Flash fornecem. No entanto, na maior parte dos casos, é mais do que adequado. 

Áudio simples em HTML5

A forma mais simples para implementar áudio numa página web através de HTML5 é usando o novo tag de áudio. Implemente esta tag no documento de HTML5, usando o seguinte código: 

1

<audio controls="controls">

2

  <source src="track.ogg" type="audio/ogg" />

3

  <source src="track.mp3" type="audio/mpeg" />

4

Your browser does not support the audio element.

5

</audio>

Prestando atenção ao código em cima, é possível verificar que declarei a tag <audio> e os atributos de controlo, de modo a que os controladores default do player sejam visíveis.

Dentro do <audio> temos 2 tags 'src'. Uma define a faixa MP3 e a outra define o formato OGG. O formato OGG é especialmente usado para permitir que a música toque no Firefox, uma vez que devido a licenças o Firefox não suporta MP3 sem usar um plugin. A seguinte mensagem O seu broser não suporta o elemento de audio. permite que os utilizadores com browsers incompatíveis saibam o que se passa.

O player de áudio HTML5 predefenido.

Atributos da tag de áudio HTML5

Para além de suportar atributos gerais de HTML5, a tag também suporta um conjunto de atributos próprios.

• autoplay - Pode ser ativado usando "true" ou não, usando "" para definir se a faixa deve tocar automaticamente quando a página carrega. 
• controlos - Como verificado pelo exmplo acima, este comando define se os controlos nativos como por exemplo 'play, pause' etc devem estar visíveis.
• loop - "loop" define se a faixa deve tocar novamente após ter terminado.
• preload - Este comando pode ser colocado em "auto" (singnifica que o ficheiro irá carregar assim que a página for carregada), "metadata" (significa que apenas a metadata, título da faixa etc. devem ser carregados), "none" (significa que o browser não deve carregar o ficheiro até que a página tenha acabado de carregar).
• src - Este comando pode ser visto no exemplo acima e define o url da música que deve ser tocado pelo tag de audio.

Início

Nos passos anteriores, olhámos para a forma mais simples de áudio HTML5. Quando começamos a utilizar a tag áudio com javascript podemos começar a criar alguns players de audio realmente interessantes e úteis. Vamos agora ver o que o jQuery pode fazer por nós. Depois de definirmos o "document ready" em jQuery, podemos criar uma nova variável de áudio para manter o nosso arquivo de áudio tão simples como isto:

1

var myaudio = new Audio('mysong.mp3');

É realmente simples! Depois, sempre que quisermos executar uma ação com o áudio podemos usar a variável 'myaudio'. Aqui está uma lista de ações que podem ser usadas com a variável. Tome nota desta lista, iremos usar algumas destas ações mais tarde no tutorial quando criarmos o nosso player de áudio...

1

myaudio.play(); - This will play the music.

2

myaudio.pause(); - This will stop the music.

3

myaudio.duration; - Returns the length of the music track.

4

myaudio.currentTime = 0; - This will rewind the audio to the beginning.

5

myaudio.loop = true; - This will make the audio track loop.

6

myaudio.muted = true; - This will mute the track

Se quiser que uma função seja chamada assim que terminar de tocar o áudio, pode usar o 'myaudio.addEventListener('ended',myfunc)' - isto irá chamar 'myfunc()' quando o áudio tiver terminado.

Criar o Player de áudio HTML5: Markup

Agora que já tem um pouco de conhecimento sobre áudio HTML5 e entende os princípios básicos, está na hora de colocá-los em prática e criar um player de áudio personalizado em HTML5. Vamos passar a fase de design à frente uma vez que não fica no âmbito deste tutorial. No entanto, pode fazer o download do código-fonte e navegar pelo PSD para obter uma ideia de como foi criado.

A parte superior do documento é composto pelo doctype do HTML5. Yahoos CSS Reset e a tipografia web do Google 'Lobster' foram usadas para o título. Em seguida temos a versão mais recente de jQuery e do ficheiro JavaScript  js.js. Finalmente, temos o html5slider.js que permite que o Firefox exiba o tipo de intervalo de entrada HTML5, que será usada para o marcador de áudio.

1

<!DOCTYPE html>

2

<head>

3

  <title>HTML5 Audio Tutorial</title>

4

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

5

	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

6

	<link rel="stylesheet" type="text/css" href="css/style.css">

7

	<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>

8

	<script type="text/javascript" src="js/js.js"></script>

9

	<script type="text/javascript" src="js/html5slider.js"></script>

10

</head>

Após o título h1, criei uma div com uma classe de "container" e "gradient". Eu criei uma classe separada do gradiente para ser reutilizado em outros elementos. Dentro do ".container" adicionei uma imagem (que será a capa do álbum) e, em seguida, as três tags que vão atuar como os controlos para o player. Entre eles, pode encontrar o campo de entrada de gama scrubber/HTML5.

1

<body>

2

3

	<h1>HTML 5 Audio Player</h1>

4

5

	<div class="container gradient">

6

7

		<img class="cover" src="images/cover.jpg" alt="">

8

9

		<div class="player gradient">

10

11

			<a class="button gradient" id="play" href="" title=""></a>

12

			<a class="button gradient" id="mute" href="" title=""></a>

13

14

				<input type="range" id="seek" value="0" max=""/>

15

16

			<a class="button gradient" id="close" href="" title=""></a>

17

18

		</div><!-- / player -->

19

20

	</div><!-- / Container-->

21

</body>

22

</html>

Criar o Player de áudio HTML5: Estilo

Em vez de ir a fundo em todos os aspetos de CSS, vou dar uma pequena passagem e realçar as partes mais importantes onde deve prestar mais atenção.

No código abaixo criei um degradê para o player que foi gerado usando este editor de degradê CSS. De seguida criei o player ".container" com algumas transições de CSS3.

Poderá ter notado que também usei a secção do atributo CSS3 como dimensionamento da 'border-box'. Isto permite o preenchimento de 10px em torno da margem para ser incluído dentro da largura que declarámos, neste caso 427px. Caso isto não tivesse sido usado, o preenchimento seria adicionado a largura de 427px fazendo o caixa maior do que eu realmente quero. Tem sido prática corrente aplicar * {box-sizing: border-box;} sendo uma forma mais intuitiva de aplicar estilo.  

Também adicionei algumas transições de CSS3 ao ".coverlarge" para permitir algumas transições agradável quando o player abre pela primeira vez. O CSS pode parecer um pouco assustador à primeira vista, mas a maior parte do conteúdo são prefixos para cada browser, de modo a garantir que o player de áudio parece e funciona da mesma maneira em diferentes browsers.

1

.gradient {

2

	border: 1px solid black;

3

4

	-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

5

	-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

6

	box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

7

	background: #494949; /* Old browsers */

8

background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

9

10

	background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

11

	background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

12

	background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

13

	background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */

14

-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */

15

}

16

17

.container {

18

	-webkit-transition: all .7s ease;

19

	-moz-transition: all .7s ease;

20

	-o-transition: all .7s ease;

21

	-ms-transition: all .7s ease;

22

	transition: all .7s ease;

23

	position: absolute;

24

	width: 427px;

25

	height: 70px;

26

27

	-webkit-border-radius: 10px;

28

	-moz-border-radius: 10px;

29

	border-radius: 10px;

30

31

	-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

32

	-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

33

	box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

34

	top: 50%;

35

	left: 50%;

36

	margin: -214px 0px 0px -214px;

37

	padding: 10px;

38

39

	-webkit-box-sizing: border-box;

40

	-moz-box-sizing: border-box;

41

	-ms-box-sizing: border-box;

42

	box-sizing: border-box;

43

}

44

45

46

.containerLarge {

47

	height: 427px;

48

}

49

50

.cover {

51

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

52

	filter: alpha(opacity=0);

53

	opacity: 0;

54

	width: 398px;

55

	height: 10px;

56

	border: 2px solid black;

57

58

	-webkit-border-radius: 5px;

59

	-moz-border-radius: 5px;

60

	border-radius: 5px;

61

62

	-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

63

	-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

64

	box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

65

}

66

67

.coverLarge {

68

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

69

	filter: alpha(opacity=100);

70

	opacity: 1;

71

	height: 398px;

72

73

	-webkit-transition: opacity .7s ease;

74

	-moz-transition: opacity .7s ease;

75

	-o-transition: opacity .7s ease;

76

	-ms-transition: opacity .7s ease;

77

	transition: opacity .7s ease;

78

79

	-webkit-transition-delay: .5s;

80

	-moz-transition-delay: .5s;

81

	-o-transition-delay: .5s;

82

	-ms-transition-delay: .5s;

83

	transition-delay: .5s;

84

}

Como o player de áudio deve parecer nesta fase

Uma vez que área para o player está completa, é hora de criar os controladores. A maioria dos botões foram criados usando CSS sprites.

Infelizmente o IE ainda não suporta HTML5, pelo que decidi não mostrar o marcador de áudio aos utilizadores do IE. Se no seu caso necessitar de mostrar o marcador, pode usar o jQuery UI slider de forma idêntica ao que usei. No entanto eu optei por esconder o marcador da seguinte forma input{display:none\9!important;} . Basicamente, este código esconde o marcador dos utilizadores do IE (ver este tópico no Stack Overflow para mais informação na \9).

O problema com o marcador de áudio em HTML5 é que somente alguns navegadores oferecem suporte a estilos personalizados principalmente webkit navegadores (Chrome e Safari). Infelizmente, o Opera e Firefox apenas irão mostrar um marcador standard. Caso precise de personalizar o player em todos os browsers,  pode usar o jQuery UI slider, como mencionado anteriormente. Pode ver o estilo personalizado para os browsers de webkit no atributo input::-webkit-slider-thumb.

1

.player {

2

	-webkit-box-sizing: border-box;

3

	-moz-box-sizing: border-box;

4

	-ms-box-sizing: border-box;

5

	box-sizing: border-box;

6

	position: absolute;

7

	width: 300px;

8

	bottom: 10px;

9

	width: 95%;

10

11

	-webkit-border-radius: 3px;

12

	-moz-border-radius: 3px;

13

	border-radius: 3px;

14

	padding: 5px;

15

}

16

17

.button {

18

	display: block;

19

	width: 34px;

20

	height: 34px;

21

	background-image: url(../images/sprite.png);

22

	background-repeat: no-repeat;

23

	float: left;

24

	margin-right: 5px;

25

}

26

27

#play {

28

	background-position: 6px 5px;

29

}

30

31

#pause {

32

	background-position: -32px 5px;

33

}

34

35

#mute {

36

	background-position: -63px 5px;

37

}

38

39

#muted {

40

	background-position: -106px 5px;

41

}

42

43

input[type="range"] {

44

	width: 250px;

45

	margin-top: -5px;

46

}

47

48

#close {

49

	float: right;

50

	background-position: -146px 5px;

51

	display: none;

52

}

53

54

.volume {

55

	position: absolute;

56

	height: 100px;

57

	width: 34px;

58

	border: 1px solid black;

59

	background-color: #242323;

60

	top: -97px;

61

	display: none;

62

}

63

input{

64

	display:none\9!important;

65

}

66

input[type="range"] {

67

	-webkit-appearance: none;

68

	border: 1px solid black;

69

	position: absolute;

70

	top: 18px;

71

	display: block;

72

	width: 63%;

73

	height: 15px;

74

75

	-webkit-border-radius: 20px;

76

	-moz-border-radius: 20px;

77

	border-radius: 20px;

78

	background-color: #242323;

79

	left: 90px;

80

81

	-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

82

	-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

83

	box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

84

}

85

86

input::-webkit-slider-thumb {

87

	-webkit-appearance: none;

88

	width: 20px;

89

	height: 20px;

90

	border:1px solid black;

91

92

	-webkit-border-radius: 10px;

93

	border-radius: 10px;

94

	background: #80e4df; /* Old browsers */

95

background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

96

97

	background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

98

	background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

99

	background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */

100

}

Como criar o Player de áudio em HTML5: jQuery

Quando o estilo e a marcação tiverem sido feitos, é hora de dar vida ao player. Podemos fazer isso usando o framework de javascript jQuery. Quando o jQuery document ready for declarado, crie algumas variáveis que servirão para armazenar os objetos de jQuery.

1

container = $('.container');

2

	cover = $('.cover');

3

	play = $('#play');

4

	pause = $('#pause');

5

	mute = $('#mute');

6

	muted = $('#muted');

7

	close = $('#close');

8

	song = new Audio('music/track1.ogg','music/track1.mp3');

9

	duration = song.duration;

Na variável "song" pode ver que declarámos duas faixas. O formato OGG para Firefox e MP3 para outros navegadores. De seguida criei a condicional IF para que possamos verificar se o navegador pode tocar ficheiros MP3 ou não. Se o navegador puder, então a varíavel "song" vai tocar a faixa em MP3 - Caso contrário, vaiu tocar o ficheiro 'OGG'.

1

if (song.canPlayType('audio/mpeg;')) {

2

  	song.type= 'audio/mpeg';

3

  	song.src= 'music/track1.mp3';

4

	} else {

5

  	song.type= 'audio/ogg';

6

  	song.src= 'music/track1.ogg';

7

	}

De seguida vamos criar as funções para os cliques, que nos permitirão iniciar e pausar a música. Neste caso usei a acção play() para começar a tocar o áudio, de seguida usei o método de jQuery replaceWith que basicamente substitui o botão de play pelo de pausa.

Adicionei também as classes "coverLarge" e "containerLarge" ao "container" e "cover". Como adicionei transições de CSS3 a estas classes previamente no CSS, vou adicionar uma transição para quando o áudio começar a tocar. A função de "pause" funciona de uma forma similar, mas sem efeito de transição. Quando clicado, o botão de pausa é substituido pelo botão "play".

1

play.live('click', function(e) {

2

		e.preventDefault();

3

		song.play();

4

5

		$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');

6

		container.addClass('containerLarge');

7

		cover.addClass('coverLarge');

8

		$('#close').fadeIn(300);

9

		$('#seek').attr('max',song.duration);

10

	});

11

12

	pause.live('click', function(e) {

13

		e.preventDefault();

14

		song.pause();

15

		$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

16

17

	});

O botão de mute funciona de forma semelhante ao butão de play e pausa, apenas sendo diferente nas funções que tem associado.

1

mute.live('click', function(e) {

2

		e.preventDefault();

3

		song.volume = 0;

4

		$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');

5

6

	});

7

8

	muted.live('click', function(e) {

9

		e.preventDefault();

10

		song.volume = 1;

11

		$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');

12

13

	});

Quando os utilizadores carregarem em no botão "close" o jQuery vai ser chamado para remover a classe "containerLarge" e "coverLarge". Isto vai fazer com que a "cover" fique invisível e que o player se feche. De seguida, pausamos o player usando a acção pause () e fazemos o reset ao currentTime do áudio, que fica igual a 0. Isto faz com que a faixa de áudio regresse ao início.

1

$('#close').click(function(e) {

2

		e.preventDefault();

3

		container.removeClass('containerLarge');

4

		cover.removeClass('coverLarge');

5

		song.pause();

6

		song.currentTime = 0;

7

		$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

8

		$('#close').fadeOut(300);

9

	});

Vamos agora passar ao marcador de áudio, o qual tem como id "seek". A primeira função é fazer com que possamos mover o marcador e avançar para qual parte do áudio. Isto é feito através da detecção de uma alteração sempre que alguém move o marcador. De seguida fazemos com que o song.currentTime seja igual à parte do áudio para onde movemos o marcador. Para terminar, é importante definir a duração máxima da faixa através do atributo max.

1

$("#seek").bind("change", function() {

2

		song.currentTime = $(this).val();

3

		$("#seek").attr("max", song.duration);

4

	});

Por último em jQuery, temos de fazer com que o marcador "#seek" se mova com o decorrer da duração do áudio. Para tal, necessitamos de adicionar o evento "listenner" e quando o tempo atualizar, iremos chamar esta função. Eu defeni a variável "curtime" para refletir o songtime. De seguida, atualizei o valor do macardor de áudio para refletir a posição do tempo currente do áudio.

1

song.addEventListener('timeupdate',function (){

2

	curtime = parseInt(song.currentTime, 10);

3

		$("#seek").attr("value", curtime);

4

	});

E está feito! Um player em HTML5 que pode implementar no seu site ou aplicação.

Conclusão

Como já foi referido anteriormente, o áudio em HTML5 ainda está numa fase muito inícial e tem bastante para melhorar. De momento, o áudio HTML5 foi concebido para tocar música necessitando para tal de um servidor multimedia, o que vai fazer com que alguns navegadores tenham problemas com a reprodução. Nem sempre isto será a fonte do problema, mas simplesmente significa que por vezes irá começar a tocar o áudio antes deste ter sido descarregado por completo.

Isto poderá ser um problema caso deseje utilizar o áudio HTML5 para efeitos sonoros de jogos ou aplicações que recorram a áudio de forma intensiva. Por este motivo os nossos amigos da Google criaram um método para melhorar o problema das tags de áudio. A Google desenvolveu uma proposta para a W3C para "Web Audio API". Isto prova que existe bastante espaço para melhorar o áudio HTML5, no entanto o problema é que de momento ainda só é suportado pelo Chrome.

Mais informação relativamente à Web Audio API da Google pode ser encontrada na página de código da Google ou nas especificações de web áudio.

Espero sinceramente que tenham apreciado aprender mais acerca de áudio em HTML5 e como podem criar os vossos próprios players. O meu player inclui controladores básicos, mas nada o impede de adicionar outros conteúdos, como por exemplo uma opção para controlar o volume ou até adicionar as suas próprias animações. Com um pouco de creatividade e experimentação pode criar players de áudio fantásticos. Faça o download o código fonte e fico a aguardar pelos vossos players!

E, caso esteja interessado em ver mais exemplos de players de áudio e outros elementos de media em HTML5, pode passar pelo Mercado da Envato e ver os items de HTML5 Media.