<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog do PacMan &#187; html5</title>
	<atom:link href="http://pacman.blog.br/blog/tag/html5/feed/" rel="self" type="application/rss+xml" />
	<link>http://pacman.blog.br/blog</link>
	<description>Varias Coisas, por Tiago Peczenyj</description>
	<lastBuildDate>Thu, 26 Jan 2012 13:51:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Como saber se uma musica parou de tocar em html 5</title>
		<link>http://pacman.blog.br/blog/dicas/como-saber-se-uma-musica-parou-de-tocar-em-html-5/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=como-saber-se-uma-musica-parou-de-tocar-em-html-5</link>
		<comments>http://pacman.blog.br/blog/dicas/como-saber-se-uma-musica-parou-de-tocar-em-html-5/#comments</comments>
		<pubDate>Thu, 29 Apr 2010 23:58:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Dicas]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://pacman.blog.br/blog/dicas/como-saber-se-uma-musica-parou-de-tocar-em-html-5/</guid>
		<description><![CDATA[Anteriormente vimos como descobrir que uma musica parou de tocar em ActionScript 3. Hoje em dia temos uma quantidade interessante de browsers que suportam alguma coisa de html 5 (safari, chrome, firefox&#8230;), portanto nada mais justo que analisar também esta &#8230; <a href="http://pacman.blog.br/blog/dicas/como-saber-se-uma-musica-parou-de-tocar-em-html-5/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Anteriormente vimos como descobrir que uma musica parou de tocar em ActionScript 3. Hoje em dia temos uma quantidade interessante de browsers que suportam alguma coisa de html 5 (safari, chrome, firefox&#8230;), portanto nada mais justo que analisar também esta solução.</p>
<p>Vejamos como tocar o nosso jazz.mp3</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;audio id=&quot;mp3&quot; src=&quot;jazz.mp3&quot; type=&quot;audio/mpeg&quot; controls/&gt;</pre></div></div>

<p>Apenas esta tag vai gerar um pequeno player com controles customizados pelo browser. E como saber que a musica parou? Basta escutar pelo evento <strong>ended</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> mp3 <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mp3'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
mp3.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ended'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> 
	<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;fim&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Para customizar os controles basta omitir o atributo <em>controls</em> na tag audio e usar os métodos play e pause, por exemplo.</p>
<p>Um bom exemplo pode ser encontrado aqui:<br />
<a href="http://ajaxian.com/archives/html5-media-support-video-and-audio-tags-and-scriptability">http://ajaxian.com/archives/html5-media-support-video-and-audio-tags-and-scriptability</a></p>
<p>E documentação sobre html 5 vc encontra aqui:<br />
<a href="http://www.w3schools.com/html5/html5_reference.asp">http://www.w3schools.com/html5/html5_reference.asp</a></p>
<p>A tag <em>video</em> segue a mesma idéia, mas será assunto para um próximo post.</p>
]]></content:encoded>
			<wfw:commentRss>http://pacman.blog.br/blog/dicas/como-saber-se-uma-musica-parou-de-tocar-em-html-5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

