Este tutorial é principalmente para mostrar as novas adições ao HTML5
A imagem acima é a interface da interface do usuário deste player de áudio, que também esconde uma lista de reprodução de músicas. Exceto pela imagem de retrato no grande fundo e pela classificação de estrelas da música, a interface do usuário do jogador inteiro usa a imagem e é desenhada pelo CSS e pela font-face. As únicas coisas que parecem difíceis são a produção de CDs e discos. Quando a música é tocada, os CDs e os discos têm um efeito de interação de animação. Isso será explicado na parte posterior. Clique no CD do jogador para abrir a lista de reprodução ~
Como este tutorial é principalmente para mostrar o uso da API DOM da nova tag <udio> e elemento de áudio adicionado ao HTML5, o desenho da interface do usuário do jogador não será explicado em detalhes aqui. Se você tiver alguma dúvida, poderá ver os comentários do arquivo CSS do caso ou deixar uma mensagem abaixo.
Funções principais:1. Play, pausa, música anterior, próxima música, aumento de volume e diminuição
2. Clique no CD para abrir e fechar a lista de reprodução
3. Você pode arrastar o arquivo de música local para o jogador para reprodução.
Estrutura HTML
Copie o código