 |
|
Você está aqui: JavaScript ::: Web Audio API ::: Arquivos MP3, WAV, MIDI e outros |
Como tocar música MP3 usando a Web Audio API do JavaScript em suas páginas HTMLQuantidade de visualizações: 335 vezes |
|
Carregar um arquivo MP3 e executá-lo a partir da Web Audio API do JavaScript é uma das primeiras coisas que queremos fazer quando estamos estudando esta API. De fato, carregar um arquivo de áudio e tocá-lo é uma prova de que todas as ferramentas estão funcionando da forma que esperamos. Os passos seguintes envolvem aprofundar nos objetos, interfaces, métodos e funções da Web Audio API. No exemplo abaixo eu mostro como carregar um arquivo MP3 usando a função fetch() do objeto window do JavaScript. Note que temos dois botões. O botão Carregar se encarrega de carregar os dados do arquivo MP3 em um buffer de áudio. O botão Executar, por sua vez, passa esse buffer de áudio para um BufferSource(). Veja o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Tocar música MP3 usando a Web Audio API</title>
</head>
<body>
<h3>Clique o botão Carregar para carregar o arquivo MP3
e aguarde o botão Executar ficar habilitado</h3>
<button id="carregar_btn"
onclick="carregar_mp3()">Carregar</button>
<button id="executar_btn" disabled="disabled"
onclick="iniciar()">Executar</button>
<script language="javascript">
'use strict';
// obter referências para os botões de carregar
// o arquivo MP3 e iniciar a música
var btn_carregar = document.getElementById("carregar_btn");
var btn_executar = document.getElementById("executar_btn");
// vamos declarar o contexto de áudio
var contexto;
// vamos criar o buffer de áudio
var buffer_audio;
// e o nome e endereço do arquivo MP3
var url_arquivo_mp3 = 'musica.mp3';
// vamos criar uma função para carregar
// o arquivo MP3 que queremos executar
function carregar_mp3(){
// vamos criar um objeto AudioContext
var AudioContext = window.AudioContext
|| window.webkitAudioContext;
// e obtemos o contexto de áudio
contexto = new AudioContext();
// vamos usar a função fetch() para carregar o
// o conteúdo do arquivo MP3
window.fetch(url_arquivo_mp3)
.then(response => response.arrayBuffer())
.then(arrayBuffer => contexto.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
// vamos habilitar o botão de iniciar
btn_executar.disabled = false;
buffer_audio = audioBuffer;
});
// vamos desabilitar o botão de carregar
btn_carregar.disabled = true;
}
// função usada para tocar a música MP3
function iniciar(){
// o primeiro passo é criar um BufferSource
var source = contexto.createBufferSource();
// atribuímos ao source o buffer que carregamos
// anteriormente
source.buffer = buffer_audio;
// conectamos a fonte de dados à saída do contexto
source.connect(contexto.destination);
// e começamos a tocar a música
source.start();
}
</script>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como retornar a hora em JavaScript usando a função getHours() do objeto DateQuantidade de visualizações: 7024 vezes |
|
Em várias situações nós precisamos obter as horas a partir de um objeto Date do JavaScript. Para isso nós podemos efetuar uma chamada à sua função getHours(), que retorna um valor que vai de 0 até 23. Veja o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
<script type="text/javascript">
var data = new Date();
var hora = data.getHours();
document.write("O valor da hora é: " + hora);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: O valor da hora é: 14 |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como testar se uma string começa com uma determinada substring em JavaScript usando a função startsWith()Quantidade de visualizações: 1978 vezes |
|
O método startsWith() da linguagem JavaScript foi adicionado ao objeto String na revisão ECMAScript 2015, ou ES6, também chamado de ECMAScript 6. Este método é chamado diretamente em uma variável do tipo string e retorna true se a palavra, frase ou texto começar com uma substring específica e false em caso contrário. Veja um exemplo no qual verificamos se uma frase começa com a palavra "JavaScript": ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
var frase = "JavaScript é uma das melhores linguagens";
if(frase.startsWith("JavaScript")){
document.writeln("A frase começa com a palavra JavaScript");
}
else{
document.writeln("A frase não começa com a palavra JavaScript");
}
</script>
Ao executarmos este código JavaScript nós teremos o seguinte resultado: A frase começa com a palavra JavaScript É importante ter em mente que a função startsWith() diferente letras maiúsculas de letras minúsculas. |
JavaScript ::: DOM (Document Object Model) ::: Navegação e Pesquisa de Nós (Nodes) |
Como obter o tipo de um nó no DOM (Document Object Model) usando a propriedade nodeType a partir de seus códigos JavaScriptQuantidade de visualizações: 8263 vezes |
|
Como obter o tipo de um nó no DOM (Document Object Model) usando a propriedade nodeType a partir de seus códigos JavaScript A propriedade nodeType, definida no World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1, pode ser usada quando precisamos obter o tipo de um determinado nó (node) na hierarquia de elementos HTML no DOM (Document Object Model). Esta propriedade retorna um valor inteiro indicando o tipo de nó sendo testado. Os valores mais comuns são 1 (nó elemento) e 3 (nó texto). Veja uma página HTML na qual temos um parágrafo e um elemento span. Na primeira vez nós vamos obter uma referência ao parágrafo e testar o tipo do nó. Na segunda vez nós obtemos uma referência ao primeiro nó filho do elemento span, o que resultará em seu conteúdo sendo testado. Veja: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function obterNodeType(){
// vamos obter uma referência ao parágrafo com o id "paragrafo"
var elem = document.getElementById("paragrafo");
// vamos obter o tipo de nó deste elemento
var tipo = elem.nodeType;
// vamos mostrar o resultado
window.alert("O tipo deste elemento é: " + tipo);
// vamos obter uma referência ao span com o id "frase"
elem = document.getElementById("frase");
// vamos obter o tipo de nó do primeiro filho deste elemento
tipo = elem.firstChild.nodeType;
// vamos mostrar o resultado
window.alert("O tipo deste elemento é: " + tipo);
}
</script>
</head>
<body>
<p id="paragrafo">Sou um parágrafo</p>
<span id="frase">Veja esta frase</span>
<br><button onclick="obterNodeType()">Obter tipo do nó (nodeType)</button>
</body>
</html>
Note que esta propriedade é somente-leitura, ou seja, não podemos modificar seu valor em tempo de execução. A propriedade nodeType pode ser obtida a partir dos seguintes elementos: a, abbr, acronym, address, applet, area, b, base, basefont, bdo, bgsound, big, blink, blockquote, body, br, button, caption, center, cite, code, col, colgroup, comment, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:hidden, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, link, listing, map, marquee, menu, meta, nobr, noframes, noscript, object, ol, optgroup, option, p, param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, xml e xmp. Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
Vamos testar seus conhecimentos em Hidrologia |
| Como é chamado o processo em que a água passa do estado líquido para o estado sólido no meio atmosférico? A) Infiltração. B) Condensação. C) Evapotranspiração. D) Transpiração. E) Precipitação. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
| Qual das seguintes instruções JavaScript é uma definição correta de um array? A) a = new Array[100]; B) var a = new Array(100); C) var[] a = new String[100]; D) var a = new Array[100]; Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Dimensionamento de lajes maciças à flexão As lajes maciças são armadas em apenas uma direção, quando apresentam a relação entre o maior e o menor vão superior a 2. Nessas situações, a laje é dimensionada como um conjunto de vigas de largura unitária, dispostas paralelamente. Considere a laje maciça apresentada na figura a seguir e determine a área de aço necessária para resistir aos esforços máximos de flexão.  Dados: Peso específico do concreto = 25kN/m3 Carga do contrapiso + revestimento = 1,50kN/m2 Carga acidental = 2,00kN/m2 Altura da laje (h) = 12cm Altura útil (d) = 8cm fcd = fck / 1,4 (considerar concreto de 20MPa) fyd = fyk / 1,15 (considerar aço CA-50) Assinale a alternativa que apresenta o valor correto de As: A) As = 0,019cm2. B) As = 1,75cm2. C) As = 1,397cm2. D) As = 0,024cm2. E) As = 1,701cm2. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em AutoCAD Civil 3D |
| A paleta Toolspace Qual aba da paleta Toolspace é usada para exibir os objetos do Civil 3D em uma lista resumida e expansível? A) Settings B) Prospector C) Toolbox D) Survey Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual declaração de variável vai provocar um erro em Python? A) minhaNota = 4.65 B) minha_nota = 4.65 C) Minha_nota = 4.65 D) minha-nota = 4.65 E) MinhaNota = 4.65 Verificar Resposta Estudar Cards Todas as Questões |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
