Sou um grande fã de APIs HTML5 e JavaScript, tendo explorado muitos, incluindo getusermedia, discurso na web e APIs de orientação da tela (com um repositório dedicado do GitHub). Este artigo demonstra a construção de um Javascript Audio Player Player amigável para dispositivos móveis, aproveitando várias APIs para uma experiência aprimorada do usuário.

Recursos de chave:

Este Javascript Audio Player utiliza a luz ambiente, a proximidade, o status da bateria, as notificações da Web e as APIs de vibração para criar uma experiência móvel responsiva e envolvente. Ele é construído com aprimoramento progressivo, funcionando corretamente, mesmo que certas APIs não sejam suportadas. Especificamente, ele adapta o tema com base na luz ambiente, faz uma pausa/reprodução com base na proximidade e gerencia a reprodução com base no nível da bateria, notificando o usuário e fornecendo feedback háptico quando necessário. O código está disponível no Github e uma demonstração ao vivo é fornecida.

utilização da API:

O jogador emprega estas APIs:

• API Ambient Light: ajusta dinamicamente o tema da página da web (Dark/Light) de acordo com os níveis de luz ambiente.
• API de proximidade: reproduz/pausa o áudio com base na detecção do sensor de proximidade.
• API do status da bateria: monitora o nível da bateria e faz uma pausa em áudio quando criticamente baixa.
• API de notificações da web: alerta o usuário sobre a bateria baixa e a pausa de áudio.
• API de vibração: fornece feedback háptico para reforçar as notificações no nível da bateria.

O tutorial assume familiaridade com essas APIs. O jogador usa o elemento HTML5 como um fallback, exibindo uma mensagem se o elemento não for suportado.

html estrutura:

O html é direto: uma breve descrição, o elemento com controles nativos ativados ( controla o atributo ), um link de estilos de estilos CSS e o link do arquivo javascript. O body inicialmente tem o normal-theme classe.

  
  
  
  
  
  


  
APIs-powered Audio Player
  
This demo showcases a simple APIs-powered audio player using the Proximity, Battery Status, Vibration, Web Notifications, and Ambient Light APIs.
  
  

CSS Styling:

O CSS define estilos para o body e três temas ( Dark-theme , Normal-theme , Light-theme , cada um com o fundo e as variações de cor de texto para ideal para ideal em Lighting em Lighting

body {
  max-width: 600px;
  margin: 0 auto;
  font-size: 20px;
  padding: 0 1em;
}

.dark-theme {
  background-color: #000000;
  color: #FFFFFF;
}

.normal-theme {
  background-color: #B8FFF7;
  color: #C53131;
}

.light-theme {
  background-color: #FFFFFF;
  color: #000000;
}

Javascript Logic:

O código JavaScript primeiro testes para suporte à API e define as definições de configuração para limiares e mensagens de notificação. Ele recupera o elemento de áudio e implementa as funcionalidades da API: controle de reprodução baseado em proximidade, comutação de temas com base nos níveis de luz e monitoramento do nível da bateria com notificações e feedback de vibração. O código completo está disponível no github.

Conclusão:

Este tutorial demonstra o poder das APIs JavaScript na criação de aplicativos móveis ricos em recursos. A experiência aprimorada do usuário mostra o potencial dessas APIs para criar aplicativos envolventes e responsivos focados em dispositivos móveis. Um repositório do GitHub e uma demonstração ao vivo estão disponíveis para uma exploração adicional.

A seção Perguntas frequentes, abordando recursos da lista de reprodução, controles personalizados, capacidade de resposta, integração da API de áudio da web, barras de progresso, volume e controles mudos, funcionalidades de loop e embaralhamento e botões de download, permanecem inalterados e estão disponíveis na saída original.