Colocando áudio no seu site - @Curso em Vídeo HTML5 e CSS3

e vamos dar continuidade aos nossos estudos do Capítulo 11 do seu material de html CSS E para isso eu preciso que você abra o material e acompanha o pdf comigo é [Aplausos] E aí [Aplausos] [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula do seu curso de HTML e CSS nós estamos no Capítulo 11 a gente tá falando sobre mídias em que acabou de falar nos vídeos anteriores sobre imagens dinâmicas Aquelas imagens que vão carregando de acordo com a largura da sua tela né mas se adaptando a tua mãe

da tela do seu dispositivo que você tá acessando a internet e agora a gente vai falar sobre uma coisa muito importante também nos dispositivos Principalmente nos dispositivos móveis que é o áudio Tem muita gente que consome bastante áudio né Ouvindo música ouvindo Podcast né que é uma mídia a cada vez mais popular aí ou simplesmente alguns efeitos sonoros e dá para carregar dentro do HTML utilizando HTML5 dá para carregar áudio no seu site também então diretamente pelo computador e vamos continuar a trabalhar no exército Capítulo 11 interrompa sua aula que um minutinho para trazer mais

um recado da hostnet Você se lembra da época em que as empresas de hospedagem só ofereciam domínio hospedagem lugar para colocar e o que aquele empresa de hospedagem ainda trabalha desse jeito e por acaso essa tua empresa de hospedagem te ajuda a resolver alguns problemas do seu site não só problemas no servidor pois saiba que existe a hostnet que oferece também bons espaços para armazenamento registro de domínio os domingos mais modernos do mercado da espaço de e-mail tudo com backup profissional e ainda te dá a educação porque quem é assinante de alguns dos planos também

recebe cursos recebe treinamento recebe orientação e o site que você vai criar não é com ferramentas gratuitas bem simplesinhas ilimitadas não são ferramentas Premium e você não vai precisar pagar um tostão a mais por isso e se por acaso durante a criação do seu site aconteceu algum problema pode contar com suporte que a maioria dos problemas eles conseguem te ajudar a resolver esse problema for muito grave também existe um ótimo sistema de backup e retorna para o dia de ontem Por exemplo quando tava funcionando para maiores informações ó esse link que está aqui a contar

a câmera do seu celular para tela do seu computador ou então o link está aqui na descrição do vídeo para saber um pouco mais sobre esse serviço de hospedagem junto com educação e suporte nota 10 isso tudo Você só tem na rotina não se esqueça disso vamos voltar Natal e E então é só nós já estamos aqui com aquele exercícios de imagem dinâmica você deve ter feito isso aqui funcionar né então você tem você tem aquela grande de carrega imagem grande se você tem uma tela média de carrega uma imagem média pela pequena de carrega

uma imagem Pequena já fizemos isso também agora que eu vou fazer o seguinte eu vou vir aqui na pasta de exercício está vendo só em meus documentos estão em estudos HTML exercícios e também exercício 11 aqui dentro vou criar uma outra pasta que eu vou chamar de mídia não vou botar assento tá evitei a colocar esse tanto aí nome de pasta e sempre com letras minúsculas dentro dessa pasta mídia o que eu vou fazer é pegar um áudio qualquer pode pegar qualquer MP3 que você tem aí Lembrando que na hora de colocar no site toda

a discussão que a gente teve lá no capítulo 6 sobre direitos autorais em imagens também serve para direitos autorais em músicas em sons tá toma muito cuidado com isso vou até te dar uma dica que rapidona ó se você tem um canal no YouTube vou te dar uma dica para você pegar efeitos as músicas de maneira bem simples acesso ao seu painel de controle do YouTube vem que horas eu YouTube estúdio Então é só eu tô aqui na meu painel principal e você pode clicar aqui ó biblioteca de áudio aqui no cantinho clicando na biblioteca

de áudio você vem para esse site ou alguma coisa parecida com isso porque tá mudando toda semana muda com coisas novas aqui é o seguinte não são sempre músicas 100 porcento gratuito não sei por cento gratuitas sempre só que você pode escolher aqui ó em atribuição você pode botar aqui a transmissão necessária ou atribuição necessária ou todas as licenças basicamente O que que significa isso se você botar qualquer uma com atribuição necessária além de você colocar o áudio no seu site você tem que colocar apertar aqui ó trabalho você tem que colocar essas linhas aqui

ó tem que colocar essas linhas essa essas duas linhas aquele baixo tá Navarro nightangel do Rio está licenciado sob licença Creative commons atribui-o Beleza se você colocar aqui atribuição não necessária aí você não precisa fazer atribuição nenhum o que você pode escolher aqui músicas por gênero a Eu quero uma infantil com o clima alegre feliz aqui ele vai te dar músicas infantis com o clima feliz tá você pode escolher por duração aqui eu quero uma que tem entre três e três minutos e 30 me deu aqueles opções eu posso clicar aqui ó e baixar então

eu botei música infantil feliz você quiser pode escolher um instrumento básico aqui não vou escolher duração não necessário atribuição pode clicar aqui e fazer o download aqui ó FMI state quero permitir e pronto o arquivo já tá baixando aqui em cima já tá baixado lá na tua pasta de download deixa eu fechar aqui eu já tinha começado até tocar eu posso utilizar esse MP3 sem problema dos meus sites tá basta você ter uma conta do YouTube então fica a dica aí então tome sempre muito cuidado com direitos autorais em forma de música certo então presta

bastante atenção nessa parada outra coisa que você tem que tomar bastante atenção é contar o motivo assistimos MP3 com máxima qualidade geram arquivos muito grandes e a gente já conversou sobre isso com imagens grandes áudios grandes são maiores ainda então toma cuidado tudo aquilo que eu falei sobre imagem você pode transferir para mídia serve para imagem serve para vídeo serve para áudio tá toma cuidado com isso que a discussão é sempre muito grande em relação direito autoral eu tô usando e a empresa que foi a que criou o áudio está me processando claro cara o

direito é dela então ela tem também inclusive o direito de te processar e pedir que você tinha em seu site do ar então tomar muito cuidado com isso porque direitos autorais funcionam não ele nos casos aqui no Brasil eu trouxe aqui mais um recado muito rápido bem tranquilo e o pedido para você não sei se você sabe mas Além daqui do YouTube Eu também estou bem ativo lá nas minhas redes sociais no Instagram e no Instagram do consegui vídeo então que eu vim te pedir aqui nesse vídeo é bem simples gostou da aula tá gostando

do curso segue a gente no Instagram Vamos tornar essa comunidade muito e me ajudar a divulgar o trabalho de Quem produz conteúdo com tanto carinho e tanta dedicação a outra coisa que você pode fazer então eu tenho exercício 11 mídia é baixar uma mídia que alguém que autorize por exemplo eu tô te autorizando abaixar essa daqui agora a gente Ranger ou tá aqui Gustavo Guanabara. Derrame. Aí dentro de Gustavo Guanabara a gente plantou eu você pode pegar aqui ó código disponível para os exercícios aqui também Você pode utilizar Sem problema nenhum para atingir não financeiros

né que é que ninguém ganhando dinheiro empresa querendo ganhar dinheiro com isso né Então tá lá fez esses 11 dentro desses 11 a gente tem a pasta mídia e aqui cara eu tô te dando isso aqui é antigo em um podcast você pode vir aqui ó clica nele você pode escolher a opção de download Beleza já coloquei aqui e clicar em download isso aqui é um podcast que eu tinha há muito tempo atrás antes de Podcast começar esse negócio de moda e tal eu tive um podcast já bastante tempo inclusive foram os podcast maiores do

Brasil e nem que acabou e eu tenho é o meu meu repositório aqui interno meus pode quer esses estão disponíveis tá então você pode baixar o arquivo esse arquivo MP3 e colocar no seu site Sem problema nenhum tá então você pode pegar Pode vir eu tô te autorizando de vir aqui pegar esse arquivo MP3 e colocar no seu site já cinza que o download ou se você for lá na toalha de download aqui vamos lá na minha pasta de download vou abrir uma história novo eu tô com dois aqui Stories aqui e vou vir aqui

na pasta de downloads eu tenho guanacast vou arrastar aqui trava de mídia eu tenho aqui também ó o rappi mistake que eu que eu baixei lá do YouTube Eu vou fazer o seguinte aqui ó eu vou renomear ele pra ficar sem espaço e sem acentos em letras maiúsculas eu vou ter que rappi traço mistake Então beleza o que a gente pode fazer aqui a gente vai poder vir agora no HTML aqui e adicionar esse áudio Existem duas maneiras quer ver botar um h13 produzindo áudio vamos a ir a reproduzir áudios em HTML 5 beleza aqui

ó tô dizendo alto a maneira mais simples de colocar um áudio essa daqui ó áudio aí já vai te pedir os fours contra o espaço escolhe aqui tá dentro de mídia como tocar o rappi mistake só isso já tá feito se você atualizar aqui ó ele simplesmente não toca o áudio para eu reproduzir eu tenho que botar mais um parâmetro aqui ó que eu autoplay atualizando aqui parece que ele não tá tocando se vai depender muito do navegador travando eu falei foi a maneira mais simples vamos ligar porque na verdade o controle de áudio não

apareceu né para parecer se tem que colocar um outro falando essa chamado countrows do controle o atualizar tal ele apareceu o controle e eu posso dar Play aqui ó a tocar brechó aumentar aqui tá tocando aqui no meu computador sem problema pausa aí pausou o áudio é basicamente eu não sei porque que não tá funcionando aqui e aí vem o nosso próximo assunto tem muito navegador que não tem Total compatibilidade inclusive 43 por exemplo então você pode utilizar outros formatos de arquivos mas para isso você vai ter que ter o formato MP3 basicamente eles compatível

ó com esse formato aqui ó MP3 é o formato mpeg eu tenho o formato Wave e o formato o Gegê aqui um formato open-source então basicamente você precisa se você quiser tem compatibilidade 100% com todos os navegadores mesmo assim dá ficar meio pendurado aqui para o nosso Play não funcionou você tem que ter uma outra forma de adicionar o áudio que não é essa daqui que essa daqui ficou meio limitada perto então que eu vou fazer o seguinte Olha só vou te ensinar a outra maneira nós vamos fazer o seguinte aqui vamos ficar com e

vamos botar aqui áudio ele vai criar o parâmetro Só se ele que eu digo o visual Studio code a gente vai tirar aí entre áudio e barra áudio a gente vai fazer o seguinte a gente vai adicionar pois Horses vou escolher esse aqui ó sorte Sr aquele para votar src e-type tá é diferente desse daqui se uso sr67 tá para áudio é esse daqui então vou colocar aqui o meu RC control espaço eu tô dentro de mídia tô com arquivos MP3 e eu tenho aqui o tipo se eu der conta o espaço vai não eu

tenho que colocar alguns tipos no seu material na dia de html no seu material de PDF A gente colocou vários media types vários mediatek a gente falou sobre mídia tarde no seu material em PDF então você pode consultar lá para MP3 o seu áudio para MP3 vai ser áudio seu mediatype/mpeg tudo minúsculo E aí basicamente a gente não tem aqui porque eu não tenho conversor a mão mas você pode ter outros conversores ao sócio src e botar é a barra guanacast 33. A rua GG por exemplo que é um outro esforce é áudio para o

HGG e também existe a possibilidade desses Horses ser arquivo botar tia arquivos MP3 né mas vou botar aqui o eixo vamos porque eu tivesse o arquivo Wave que seria áudio para Wave único é diferente é o MP3 né que é ponto que é áudio/mpeg então assim eu posso ter esses 3 arquivos e aí lembra que eu falei isso nos vídeos anteriores a ordem é muito importante então por exemplo se você colocar aqui primeiro MP3 ele primeiro vai tentar carregar MP3 Se não conseguir Ele vai tentar carregar o arquivo ou GG se ele não conseguir Ele

vai tentar corrigir carregar aqui Wave Tahiti ele vai de cima para baixo se por acaso ele não consegui nenhum desses eu vou botar um parágrafo aqui Infelizmente seu navegador não consegue reproduzir áudio ainda vou botar um link aqui ó clique aqui para baixar o ar em MP3 E aí eu vou fazer uma HF tem um link né o seu arquivo dentro de mídia arquivo MP3 aqui no caso e vai ser compatível tá no caso ele não tá mostrando aqui deixa eu ver se aqui o autoplay funciona vamos a alguns parâmetros antes do upload o preload

ele tem essas três opções a outra meta data Renan o padrão é alto e é meio perigoso porque o alto é o seguinte se você coloca upload alto ele só vai considerar que o site terminou de carregar depois que você carregar todo o áudio também e olha que a gente tá falando aqui de um arquivo no caso do podcast eu tô falando de um arquivo 32 Mega quase 32 megas é muito pesado você tenta carregar no celular você tá lascar disse que eu sou você botar nada ou botar alto aqui uma das piores coisas que

você pode fazer para o seu site nesta data na cadeira na verdade eles vai carregar só o nome do arquivo algumas informações tipo da duração e tudo mais e não ele não vai carregar absolutamente nada só conduzo a a lei lá nos controles eu vou botar aqui para mim a data só para ele poder pegar as informações Vou colocar aqui a existem alguns parâmetros como por exemplo autoplay vamos ver se o autoplay aqui desse jeito vai funcionar aqui eu vou ter que botar alto porque eu quero autoplay eu vou ter que carregar outro quarto inteiro

não carregou é o auto-play não está funcionando voltar com trouxe para ele mostrar os controles mas esse talvez esse auto-play esteja funcionando na sua casa aqui no meu não está funcionando tem que apertar aqui ó viu começou a tocar outra coisa importante é que eu vou tirar o alto outra sua meta a data aqui quando eu boto minha data ele puxa essas informações a duração o arquivo quando eu apertar o play aí ele demora um pouquinho mais a gente conversar porque ele começa a fazer o download certo esse aqui é o caso do podcast que

eu tô falando para vocês né ó ó e outra coisa que a gente vai poder fazer existe o look o look é o seguinte poder chegar no final do áudio ele recomeça o áudio né se você tem uma musiquinha bem curtinha que aquela tenha no fundo uma música tocando que eu não recomendo você pode fazer é pode botar aqui também e basicamente O importante aqui do áudio é ele vai primeiro tentar carregar é esse daqui de cima se ele não conseguir vem para cá para baixo e se ele não conseguir carregar esses arquivos se ele

não tiver compatibilidade do navegador não tiver compatibilidade com MP3 longe comwave ele vai mostrar aqui Infelizmente o navegador não tem suporte embaixo arquivo aí volta fazendo quero te dizer cara tenta evitar por mais que seja compatível o arquivo Ei tô aqui me zoei seção arquivos muito mas muito grandes e pesados então isso vai pesar também no seu site Mas eu sou obrigado a te dizer aqui na aula que existe compatibilidade com ele mas eu também me sinto na obrigação de dizer não usa Wave porque é pesadíssimo por mais lá não mas os meus visitantes são

audiófilos cara vai de MP3 vai de agir e os arquivos são menores é mais comprimido que Vai facilitar a visualização do seu site a navegação do seu usuário esquece qualidade top quando se falar de imagem de áudio e de vídeo imagens top qualidade top é para arquivo feito download Não Para arquivo de navegação Fechou então é isso meu querido é isso minha querida falamos bastante sobre áudio dá uma olhadinha lá ouvir Esse guanacast aí que eu disponibilizei que foi produzido com muito carinho Claro a gente não tinha a qualidade tão grande isso foi de vários

anos atrás se eu não me engano esse episódio aí saiu em 2007 2008 não lembro muito bem mas já tem bastante tempo mas tem muita informação inclusive nesse dia episódio que eu coloquei aí disponível para você então é isso meu querido é isso minha querida a gente está falando de mídias aqui já falamos sobre imagem acabamos de falar sobre áudio e no próximo a gente vai falar um pouco mais sobre vídeos é uma mídia cada vez mais popular que a gente tem que ter muita atenção na hora de usar nos nossos sites beleza um grande

abraço se liga na próxima [Música] [Aplausos] E aí [Aplausos] [Música]