Todos
HTML5

Como você usa a API de áudio da Web para adicionar efeitos sonoros e música às suas páginas da Web e aplicativos?

Alimentado por IA e pela comunidade do LinkedIn

Se você quiser criar experiências web imersivas e interativas, adicionar efeitos sonoros e música pode fazer uma grande diferença. Mas como fazer isso com HTML5? A resposta é a API Web Audio, um recurso poderoso e versátil que permite manipular e processar áudio em tempo real. Neste artigo, você aprenderá a usar a API de Áudio da Web para adicionar efeitos sonoros e música às suas páginas da Web e aplicativos.

Principais especialistas neste artigo

Selecionados pela comunidade a partir de 4 contribuições. Saiba mais

1 O que é a API de áudio da Web?

A API de Áudio da Web é uma interface JavaScript que permite criar, modificar e controlar fontes e efeitos de áudio no navegador. Ele funciona criando um gráfico de nós de áudio, cada um com uma função específica e conexões de entrada/saída. Por exemplo, você pode criar um nó de origem que reproduz um arquivo de som, um nó de ganho que ajusta o volume e um nó de destino que envia a saída para os alto-falantes. Você também pode usar nós para filtragem, movimento panorâmico, reverberação e muito mais.

Adicione sua opinião

2 Como criar um contexto de áudio?

A primeira etapa para usar a API de áudio da Web é criar um contexto de áudio, que é o objeto principal que contém o gráfico de áudio e suas configurações. Você pode criar um contexto de áudio usando o construtor AudioContext, que usa um objeto de opções opcionais como parâmetro. Por exemplo, você pode especificar a taxa de amostragem, a dica de latência ou o dispositivo de saída. O contexto de áudio tem métodos e propriedades que permitem acessar e modificar o gráfico de áudio, como createNode, connect, disconnect e suspend.

Adicione sua opinião

Sean Alexander

Web Developer
Denunciar contribuição
To create an audio context, you use the AudioContext() constructor. If your browser supports it, you should always use this constructor, rather than the deprecated webkitAudioContext. You can do so like this: `let audioContext = new AudioContext();` You can also pass in an optional object that holds parameters, like latencyHint, and sampleRate. An example would look like this: `let audioContext = new AudioContext({ latencyHint: 'interactive', sampleRate: 44100 });` Now you're able to use various methods on the 'audioContext' to manipulate the audio graph.

Traduzido

Gostei

3 Como carregar e reproduzir arquivos de áudio?

Adicione sua opinião

Dacheng Cheng

I bring enthusiasm, energy, and discipline to tackle ambitious projects.
Denunciar contribuição
Be aware of the audio codecs that your media files were encoded in, as there may be limited support. Your media files are always encoded in some way, such as AAC, and the file is in some sort of format, like MP4. For the best cross-browser/OS/device support, you'll want to have your audio file re-encoded into multiple formats using multiple codecs. With modern browsers, the most reliable audio format is MP3, however it tends to be bigger file size compared to equivalent quality audio in AAC/MP4.

Traduzido

Gostei

4 Como adicionar efeitos de áudio?

Para adicionar efeitos de áudio, você precisa criar e conectar nós que modifiquem o sinal de áudio de alguma forma. A API de áudio da Web fornece vários tipos de nós para efeitos de áudio comuns, como ganho, filtro biquad, convolver, delay, compressor e analisador. Você também pode criar seus próprios nós personalizados usando a interface do AudioWorklet, que permite executar código JavaScript personalizado em um thread separado. Para criar um nó de efeito, você precisa usar o método correspondente do contexto de áudio, como createGain, createBiquadFilter ou createConvolver. Em seguida, você precisa conectar o nó ao nó de origem e ao nó de destino ou a outros nós na cadeia.

Adicione sua opinião

5 Como controlar a reprodução de áudio?

Para controlar a reprodução de áudio, você precisa usar os métodos e propriedades do nó de origem e o contexto de áudio. Por exemplo, você pode usar as propriedades start, stop e loop do nó de origem do buffer para controlar quando e como o som é reproduzido. Você também pode usar as propriedades currentTime e state do contexto de áudio para obter a posição e o status atuais do gráfico de áudio. Além disso, você pode usar os eventos e retornos de chamada do nó de origem e o contexto de áudio para manipular interações e erros do usuário. Por exemplo, você pode usar o evento onended do nó de origem para disparar uma ação quando o som terminar de ser reproduzido ou o evento onstatechange do contexto de áudio para detectar quando o gráfico de áudio for suspenso ou retomado.

Adicione sua opinião

Robert Maillet

Manager of IT Systems and Support at TORLYS
Denunciar contribuição
To quote a famous Uncle: "With great power comes great responsibility". I think there's an opportunity to create some wonderful and creative experiences using sounds on a webapp. I also think that it should be applied sparingly! Personally, any site with auto-play videos or sounds and music that jump out at me before I even started to interact with it lose me. I end up being more focused on either closing the page or trying to find the source of the sound. These things may detract from the main goal of the content being presented.

Traduzido

Gostei

6 Como usar a API de áudio da Web com outras APIs HTML5?

A API de áudio da Web pode ser usada com outras APIs HTML5 para criar aplicativos Web avançados e interativos. Por exemplo, você pode usar a API MIDI da Web para conectar e controlar dispositivos MIDI, como teclados e sintetizadores, e enviar ou receber mensagens MIDI de ou para o gráfico de áudio. Você também pode usar a API MediaStream para capturar áudio do microfone ou de outras fontes e processá-lo com a API de áudio da Web. Além disso, você pode usar a API Canvas ou a API WebGL para criar visualizações e animações com base nos dados de áudio, como formas de onda, barras de frequência ou formas 3D.

Adicione sua opinião

7 Veja o que mais considerar

Este é um espaço para compartilhar exemplos, histórias ou insights que não se encaixam em nenhuma das seções anteriores. O que mais gostaria de acrescentar?

Adicione sua opinião

Dacheng Cheng

I bring enthusiasm, energy, and discipline to tackle ambitious projects.
Denunciar contribuição
The Web Audio API has a lot of concepts which are foreign to developers outside of audio engineering, if your needs are fairly rudimentary like managing audio state and maybe doing a cross-fade between two tracks of audio, use a library like howler.js to simplify the task.

Traduzido

Gostei

HTML5

+ Siga

Classificar este artigo

Criamos este artigo com a ajuda da IA. O que você achou?

É ótimo Não é muito bom

Denunciar este artigo

Ver todos

Como você usa a API de áudio da Web para adicionar efeitos sonoros e música às suas páginas da Web e aplicativos?

1

2

3

4

5

6

7

1 O que é a API de áudio da Web?

2 Como criar um contexto de áudio?

3 Como carregar e reproduzir arquivos de áudio?

4 Como adicionar efeitos de áudio?

5 Como controlar a reprodução de áudio?

6 Como usar a API de áudio da Web com outras APIs HTML5?

7 Veja o que mais considerar

HTML5

Classificar este artigo

Agradecemos seu feedback

Outros artigos sobre HTML5

Leitura mais relevante