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

[@luanabuscariolo]

Para quem tentou executar a tag e fazer download do MP3, mas o texto com o link nunca aparece... eis a explicação que encontrei conversando com quem tem conhecimento na área: A tag não aparece, pois ela só será lida se o navegador NÃO TIVER NENHUM suporte à tag . Ou seja, se o navegador não ler MP3, OGG ou outro qualquer, mas ler algum tipo de formato de áudio , então o resultado será o controle de áudio inativo (porque ele lê áudio, só não o formato passado), porém sem mostrar a mensagem do parágrafo com seu link para download. Para que o texto com link para download seja mostrado, o navegador não deve ter nenhum suporte a áudio, ou seja, não tem navegadores hoje sem esse suporte, todos tocam áudio, logo, a tag nunca aparecerá (a não ser que você instale aqueles navegadores mega antigos que ninguém mais usa kkk). Alguns aqui nas mensagens, deram como sugestão colocar a tag para fora da tag que iria aparecer o texto com link. Realmente, aparece, PORÉM perde a essência do que seria a tag passada pelo professor. O texto de download nesse exercício deve aparecer SE o navegador não puder ler o áudio, e não aparecer em todo o tempo, independente se o áudio tocou ou não. MAS se o seu objetivo é liberar o download do arquivo mesmo tendo tocado ou não, então é só colocar o para fora de . Essa é a explicação que obtive depois de ficar quebrando a cabeça pra fazer o conteúdo da tag aparecer.

[@leolima22]

Vlw pela dica mano, e o autoplay funcionou cmg porém foi pq cliquei no link pra download e retornei a página de origem do site, meio estranho né ksksksk

[@michaelbrito349]

Excelente explicação. Muito obrigado.

[@cauamedeiros3001]

vim procurar um comentario desse, achei q tava errando em alguma coisa aqui haha

[@Usando.youtube]

👀

[@danielghostsilva]

outra coisa que notei aqui foi que mesmo colocando a tag fora da só aparece se colocar ela antes, ela ficando depois da tag também não aparece, mesmo estando fora.

[@jonasadl1112]

Se o para download do arquivo mp3 não aparecer, é porque o seu navegador conseguiu ler o áudio. Caso o navegador não conseguisse ler todos os formatos, aí sim iria aparecer a mensagem de download. Logo o download não aparece porque é um caso lógico, SE reproduzir o áudio, NÃO aparece o download, SE NÃO reproduzir, APARECE o download.

[@frogjack74]

Gente, o autoplay não funciona no Chrome pois foi proibido pelo mesmo. De acordo com a regra do Google é o próprio usuário que tem que vir a decidir se quer tocar o áudio/vídeo da página ou não. Convenhamos, é mt chato qd vc entra numa página e do nada tá tocando alguma coisa e tu fica procurando para desligar kkkkk...porém, no Microsoft Edge funciona normalmente o autoplay. Inclusive levei um susto com a intro do Guanabara kkkkkkkk

[@serjoh974]

Olá amigo. Cara, fui fazendo testes e vi que ao deixar "autoplay" o site carrega e já vai tocando, mas tem que estar ativado o parâmetro controls ativado. É bom tirar o autoplay no caso de ter vários arquivos de áudio para carregar no site, para evitar que vire uma bagunça tocando todos os áudios quando entra no site. O auto play está funcionando, só que agora de uma forma diferente.

[@spectralofc1967]

@@serjoh974 amigo pode explicar melhor?, Pq tipo no google n funciona o autoplay testei em outros navegador o autoplay pega certinho, ja o controsl o audio toca assim q vc aperta pra ele iníciar, eu queria por o auto play no google, vc tem a solução?

[@deborachiesa9411]

@@spectralofc1967 No meu nem reproduz.

[@luizas3rpa]

Autoplay no Google realmente não funciona mais, e o parâmetro controls não tem relação, visto que a única coisa que faz é adicionar um player de áudio ao site. O meio que eu encontrei de se aproximar de um autoplay, é fazendo com que o áudio comece a tocar na primeira interação com o site, isso por meio de JavaScript.

[@souza1783]

Imagina se um cara faz um site com um gemidao automático kkkkkkkkkkkk

[@aureliocapingana8891]

Melhoras prof Meu primeiro salário gostaria de te conhecer pessoalmente, te dar aquele abraço eterno de agradecimento por compartilhar com a gente o que um ser humano tem de mais valioso o seu CONHECIMETO. OBRIGADO GRANDE HOMEM...

[@MarceloDiasSchneider]

@@videosparadormirerelaxar2024 Pensamento muito pequeno o seu...

[@Lucasberwcar]

@@videosparadormirerelaxar2024 quem ta recalcado??? Kkkkk

[@RafinhaThunder]

@@videosparadormirerelaxar2024 Fazer isso que ele faz, requer tempo, independente se ela ganha por isso ou não. Se eu conseguir chegar lá eu mando uma grana pro guanabara!

[@nicolaspegadinhas1729]

Ele tava doente? Pq "melhoras"?

[@pollyannemello618]

Atitude nobre, dá honra aquele que deu honra. Você pode ajudar contribuindo no canal dele, sendo um patrocinador.

[@Sidney_Oliveira50]

li algo sobre site responsivo e a utilização do Bootstrap !!!! para isso, mas achei fantástico como utilizou esses recursos, você é um excelente professor.

[@dutra6686]

Professor guanabara, muito obrigado por compartilhar o seu conhecimento, está me ajudando muito. Deus abençoe sua vida!!!!

[@dionesmarco6210]

Professor Muito Feliz aqui assistindo suas aulas adquirindo conhecimento de qualidade, você é de uma humildade muito grande e coração enorme, Deus sempre lhe abencõe.

[@BoyGamerModern]

Você participou de DOIS Nerdcasts e eu não sabia disso! Como que eu não sabia disso antes??? Vou escutar agora! E melhoras professor! Vai dar certo.

[@tamarasantosc]

GRATIDÃO GUANAABARA!!! Melhoras e boa recuperação, estou colocando você em minhas orações!!

[@leilsonlima5548]

Melhor curso para aprender programação e outras linguagens, eu recomendo muito, meus parabéns ao professor Gustavo guanabara👍👏👏👏👏👏👏

[@mayaraperez8362]

A cada aula eu fico mais apaixonada! Me esforço hoje para um dia dominar esses conhecimentos. Obrigada professor !

[@hiqhuidc]

E como anda atualmente?

[@Archanjosantox]

tbm queria saber kkkk@@hiqhuidc

[@eduardo_en01]

Grande professor, obrigado por mais uma aula, foi top demais! Melhoras pra ti! 🙏🏽🙏🏽

[@zoltancaputo9562]

Obrigado apor mais este conteúdo ! Without doubts, the Curso em Vídeo Team is one the best in the Programming language learning process!!

[@leonardogenerino]

Lembro de escutar o guanacast na época que estudei na faculdade FEUC, muita nostalgia, das palestras do Guanabara

[@volmaximo]

A cada aula vai ficando muito mais interessante. Muito obrigado Guanabara!

[@autovrum]

Gustavo Guanabara agradeço muito, hoje desenvolvo app android e em breve IOS estou contigo desde quando começou, hj meu sobrinho faz faculdade e acompanha seu canal, parabéns guerreiro. aqui, explique flutter e dart (a sintaxe parece muito com js) para nós.

[@victorribeirocunha3719]

Eu estou com o livro do Jon Duckett (quase acabando, inclusive). Vejo suas aulas como forma de revisão e sempre acabo aprendendo algo novo. Estou aprendendo muito e é tudo graças a você, Guanabara. Vlw, brother 🖖🏼🤓

[@rodrigosmoreira]

Comprei o livro da Elizabeth e do Bruce. Cara, o Guanabara conseguiu superar esses dois em mais de 8mil! Sensacional! Venho aqui reforçar o livro.

[@aetosaso]

Esse livro é sensacional demais.

[@raip934]

E aí professor hj chegou meu notebook ele não é tão forte 8GB e 512 SSD i3 mais foi o que eu pude comprar chegou hj irei começar as aulas e já fiz pelo celular não é a mesma coisa mais definitivamente hj primeiro dia de aula com vc obrigado por fazer isso por nois.

[@naudericknoob8680]

tô fazendo num pc da positivo que trava a cada 30 segundos. XD

[@Louvoresplaybacks99]

@@naudericknoob8680 meus pêsames

[@CharleyWorrison15]

Muuuuuuuito boa essas aulas do capítulo 11! Para o atributo autoplay funcionar, tem que ser usado o atributo muted logo em seguida. Ou então, o navegador tem que ter permissão para executar áudios. Por padrão, todos os navegadores vem com essa permissão negada.

[@sheilasantos9693]

Funcionou aqui! Brigada!

[@Louvoresplaybacks99]

eu fiz assim: (eu uso o chrome) O que aconteceu foi o seguinte: o ícone de volume iniciou no mudo, e não começou a tocar. Não consegui fazer tocar nenhuma vez automaticamente até agora

[@notechad1746]

melhoras meu querido professor, que Deus te abençoe e esteja contigo neste momento tão difícil! obrigado pelo dedicação.

[@nicolaspegadinhas1729]

Ele tava doente?

[@ricedot_python7995]

Guanabara simplesmente o cara mais foda do Brasil!!

[@18Akyra]

Vdd, tinha até esquecido da época dos podcasts do Guanabara! Guanabara foi pioneiro.

[@lucasvilasboas7326]

Melhor didática !

[@CortesdoShaolin]

Gostei do modo de playlist, assisti tudo e quando tiver algum site para fazer é somente vim no vídeo e ver novamente. Ficou muito fácil assim, obrigado Guanabara.

[@lucimarateixeira2010]

Excelente suas aulas, sempre indico para meus alunos.

[@Umgolbege]

@Lucimara Teixeira como anda?

[@cosbern5129]

Gostei dessa aula. Às vezes vejo os áudios nas notícias de alguns jornais da internet

[@veronicaoliveira5978]

Ótima aula, melhor professor com a melhor didática.

[@ricardosouza7328]

Estimo suas melhoras, que Deus lhe cubra de saúde

[@gabrielhenriqueoliveira2989]

Quando eu tenho alguma dúvida, só o Guanabara para me salvar... hahaha ótima aula! Eu tive o grande prazer de ser o teu aluno na Faetec de Santa Cruz no curso de Técnico de Informática, foi uma pena não ter finalizado o curso, mas já estou tendo novas oportunidades de dá essa continuidade no Vai na Web. Abraços, Professor!

[@fructuoso1000]

Melhoras professor!

[@nicolaspegadinhas1729]

Ele tava doente?

[@Seu0Madruga]

@@nicolaspegadinhas1729 Tava com depressão

[@paulolennnon8922]

Cara deve ser ocupado pra caralho. Às vezes isso dá um bug na mente, e a gente tem que dar uma desacelerada...

[@BaaknIgna]

@@nicolaspegadinhas1729 tava

[@joseramires5865]

muito obrigado mestre guanabara, firme e forte ate aqui

[@CrisdoSantos]

consegui colocar os dois audios na página com os 2 códigos diferentes que ele ensinou. Não sei se vcs se questionaram isso, mas eu me perguntei: "E como deixa os dois áudios na página, ai tentei só com um código e não funcionou, ele estava só substituindo o audio. Tentei o outro código e funcionou. Só queria desabafar hahaha to amando o curso Prof. muito obrigada por tanto! Estou vendo em 2022, mas imagino o trabalho pra gravar tudo em meio a pandemia na época e entregar um conteúdo de tanta excelência!

[@spectralofc1967]

Eu n conseguii ;-; pode me ajudar?

[@Louvoresplaybacks99]

@@spectralofc1967 eu consegui colocar um monte de áudio, testando de várias formas. Meu código ficou assim: Reproduzindo áudio Vamos aprender a reproduzir áudios em HTML5. Se você quiser fazer o download da música em qualidade alta: Sia - Snowman - Piano Cover 320kbps

[@w.martinsdrc2521]

Professor, eterno mestre!! O melhor de todos 😎

[@robsonarruda2134]

Tudo de bom pra você, Guanabara!

[@matheusantonioalves]

Aula assistida com sucesso! ✅

[@TopShortsFilmes]

Mano usando source não tá exibindo a imagem, pra vc tbm?

[@TheFelipouces]

Passando para deixar minha presença na aula de hoje

[@viniciusbreda9510]

Meu Deus do céu, que cara bom!!! Obrigado

[@williambarbosapereiradesou2014]

pessoal que não funcionou a tag audio no google, eu fiz assim e deu certo. * O nome do arquivo eu não coloquei .mp3*

[@FeelTheRhythmn]

Arquivo wav é teeeenso mesmo 😂😂😂 muito boa aula professor ♥️♥️♥️ obrigado!!

[@autovrum]

eu fiz assim deu certo

[@spectralofc1967]

E pego no chrome?

[@spectralofc1967]

Tentei aq e n Deu certo

[@rodrigolastname438]

Além do excelente conteúdo, descobri que o Guanabara foi o percursor do Podcast no Brasil kk..obrigadoo.

[@jonathasjesus4782]

Vamos que vamos. Melhoras Guanabara

[@zq42]

OBRIGADO AMOR TAVA PERDIDASSO NESSES BGL DE AUDIO TE AMO

[@Louvoresplaybacks99]

Lá ele

[@hebergoncalves4981]

Mais um ótimo vídeo. Obrigado, professor!

[@isadorasantos6145]

Top! Muito Bom ! Nunca tinha visto arquivos ogg e wav...

[@ALVINMAN452]

Obrigado e rápidas melhoras Guanabara.

[@pandorofortes4568]

Obrigado por mais uma aula incrível

[@criptomtips]

Passando pra deixar aquele like maroto e dizer que eu nao desisti de aprender essa bagaça. E você, vai desistir?

[@jonathasjesus4782]

Já comecei esse curso pelo site do curso em vídeo

[@ligiacarrelli4564]

Gratidão por taaaanto professor!

[@hebertsoares9555]

Melhor professor Obs: Ótimo podcast HAHAHAAH

[@Markos_Walzer]

Aula sensacional!!! ❤❤❤

[@marcioalmeida-desdogmatiza9257]

Cada aula melhor que a outra

[@professorfabioaparecido2234]

Parabéns pelo curso

[@SHESRIVER]

Dica: para o autoplay funcionar você precisa ir lá no cadeado e clicar em "configurações", depois vá ate "som" e muda para "automatico"

[@nyellfreitas3203]

que cadeado

[@eduardoborges9798]

Que aula, meus amigos, que aula!

[@brito3559]

Valeu meu professor !!!!

[@ruanvictor714]

MUITO BOM

[@ThaisRodrigues-ru7vm]

Eu uso o Chrome e meu autoplay funcionou :D

[@crcruz6069]

kkkkk rachei no final do podcast do Guanabara kkkkkk

[@marcusribeiro5759]

mto bom! Show!

[@RafaelFerreira-ph9gu]

11:54 Guanabara no .pdf o type para wav está escrito "image/wav" e não "audio/wav" como no vídeo

[@alexinigualavel3159]

aula boa!

[@thiagotalissoncruzdasilva5603]

Vlw Guanabara ❤

[@lucas-garcia--ss]

cara conseguir colocar os dois áudio pra funcionar dentro HTML5 gostei muito de aprender e agradeço

[@BiaFD88]

Amei o podcast!!! 😂😍

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@GuilhermeSilva-yp4fe]

ótima aula!

[@felipeferreiratech]

Vamos escutar esse som!!

[@ferreira8800]

Caramba, não acredito que já ouvi o Gustavo no NerdCast kkkkkk

[@leonardopimentel6692]

Ótimo vídeo Guana! Eu só consegui colocar o áudio quando ao invés de "mpeg" coloquei "mp3", fica a dica pra galera. Obrigado, guys!!

[@HOWARD000011]

tava encabulado aqui ja kkkkk, pq fiz tudo certo, o meu so pegou quando eu tirei as tudo das aspas

[@leonardopimentel6692]

@@HOWARD000011 hahahaha então mano! Fiquei doido caçando o erro também

[@leolima22]

Comigo o autoplay funcionou quando eu dei refresh na página. E eu fiz a tag fora da tag ai funcionou o link de download e o autoplay quando eu retornei a pagina de origem.

[@luanakaroline8107]

Muito obrigada!

[@leonardofachin]

obrigado pelas dicas professor só um detalhe, use no autoplay="true", aí ele roda, obrigado pelas dicas

[@ChristyanBrayan]

ainda assim não funcionou aqui

[@spectralofc1967]

@@ChristyanBrayan nen aq

[@zen1464]

pra quem nao entendeu, o chrome nao permite o autoplay por questoes de protecao do usuario(segundo oque eles dizem, mas pode ser preguica de adicionar tbm)

[@vutaqueti]

Melhoras Professor.

[@srnetoon]

Só uma observação, eu coloquei o arquivo mp3, com o formato .mp1, não rodou, era pra ter aparecido o de infelizmente?

[@johnnyenaty8583]

Top.

[@takebimeasy]

um atalho muito útil para criar pastas no windows é ctrl + shift N, fica a dica gurizada!

[@Eder6704]

Saudades ser cahamado de gafanhoto. Saudades Guanacast :( ......mas os vídeso estão ótimos e estou gostando

[@shaolin3421]

Galera, após o

[@mtheusmr]

irmao, valeuuuuuuu

[@amandask3668]

muito boa aula. Só fiquei em dúvida de porque usar a segunda maneira de introduzir áudio, se a primeira eu achei bem mais facil. queria saber se tem alguma diferença ou tanto faz usar qualquer uma das duas maneiras

[@renatacunha-]

Também fiquei nessa dúvida, e porque funcionar apenas o atributo scr na dos áudios e nas imagens funcionar o srcset pra mesma função... que é anexar o arquivo... Vai ser difícil memorizar isso pq tem diferenças pra atributos que servem pra mesma coisa, já o type é igual. Não entendi e isso tá me incomodando :')

[@renatacunha-]

Alguém saberia me explicar porque funciona apenas o atributo scr na tag dos áudios e nas imagens funciona o atributo srcset na mesma tag pra ter a mesma função... Que é anexar o arquivo... Porque não são os mesmos atributos? Não entendi e isso tá me incomodando :')

[@gilmarlo5621]

Por mais que sejam apenas alguns gatos pingados. Como alguem da deslike nesses videos?

[@MarceloMarconcini]

Loosers man.

[@pablohenriquedasilvacunha5981]

DISPONIBILIZA OS PODCASTS, POR FAVOOOOOOOOOOOOOOOORRRRRRRRRRRRR

[@tioirritante2597]

eu coloquei um GHOSTMANE pra tocar no site dkskksks, muito top

[@vinniciusrosa8284]

O meu navegador não se comportou bem, mas entendi. :D

[@enzomateusgoncalves2559]

Quando coloca a propriedade muted dentro da tag audio, com o autoplay também, ele funciona, mas sem áudio. Colocando a tag controls dá para habilitar manualmente o áudio de novo. 🤔

[@takebimeasy]

Gente, o jeito de adicionar áudio mudou um pouquinho desde que o vídeo foi gravado e esse método ali não funciona, agora é assim:

[@thiagoshelby2988]

caso esteja fazendo um site para download de samples musicais, dai sim convém disponibilizar em wav pois eu mesmo como dj so baixo wav e procuro por wav na maioria das vezes

[@JoaoGabrieluch]

De acordo com a w3schools autoplay não funciona com navegadores baseados em chromiun, incluindo o novo Edge.

[@avanjest]

Eu treinei usando o max-width e funcionou tudo certinho. Mas eu não entendi como atribuir as medidas, só botei medidas um pouquinho acima do tamanho da imagem e funcionou. Alguém pode me ajudar a entender sobre o max-width e o min-width?😢

[@marxwellborgespereira3740]

Pesquisando consegui colocar áudio assim:

[@spectralofc1967]

Ele toca automaticamente assim q entra na página?, E no Chrome?

[@mariafernandaaguero1091]

♥

[@henriquepicanco97]

Só eu que fiquei um pouco estranhado do Guanabara não ter colocados os parâmetros "download" e "type" dentro da âncora no ? hahahahaha

[@jhonywuanderson7278]

Tbem senti falta disso

[@LucasGabriel-xr5bj]

Começou o podcast msm, o arqueivo é de 2008, pouca tempo depois do jovem nerd ser conhecido

[@ccbcortes4823]

Nos "Chromium browsers" não é permitido autoplay, bom.. na verdade é, mas com o parâmetro *muted* setado. Não faz nenhum sentido abrir o site e "tocar" o áudio sendo que ele está mutado. Mas tudo bem, não sou eu o engenheiro que determinou isso. Fica assim:

[@Louvoresplaybacks99]

no meu Chrome não pegou

[@danielaraujo6587]

Olá, estou acompanhando as aulas a partir de Angola e estou aprendendo muito. Encontrei um dificuldade nesta aula, escrevi os códigos direito, porem a imagem pequena aparece: imagem flexível.

[@lineterapias4712]

Olá, também tive uma pequena dificuldade nesse ponto. Mas depois de olhar vááááárias vezes, vi que esqueci de acrescentar a unidade de media "px". Só digitava o número. Depois que percebi o problema. Espero que tenha sido fácil para vc encontrar o ponto de dificuldade e entendido essa parte da aula. Abraços!!

[@Leitaozera]

Não estou conseguindo disponibilizar o arquivo de audio pra download, mesmo colocando fora da tag , ao clicar no link para download é aberto uma aba reproduzindo o audio.

[@cavalheiroalimac]

Media top é aquela que carrega top. kkk