Prefácio: Este é um resumo das pequenas demos que aprendi recentemente. Ainda é um longo caminho para usá -los, mas ainda é bom praticar e consolidar pontos de conhecimento. Recentemente, eu estava navegando no código -fonte dos livros e boostrap.css. Depois de fazer essa demonstração, é um fim temporário. Em seguida, é o código -fonte do jQuery e o código -fonte do boostrap.js. A tarefa é muito árdua. Vamos lá, não vou postar o código em todo o artigo. Se você estiver interessado, pode me enviar uma mensagem e pode passar o código para você ~
texto:
Primeiro, as renderizações
1. Layout: O layout responsivo e adaptável no boostrap não pode ser eliminado. A linha aninhada no contêiner é então aninhada de lado e principal (H5 New Tag) e div (id = "musicconsole"), respectivamente. Além disso, a lista de música à esquerda, Main é a caixa de exibição da letra à direita, e o DIV é a caixa de controle abaixo.
2. Principais funções de implementação:
(1) Adicione músicas (o ícone "+" no canto superior direito da lista de músicas) e exclua músicas (o ícone "Trump" no canto superior direito da lista de músicas)
(2) Clique na música na lista de músicas: para a faixa será tocada; Se houver letras, as letras serão exibidas e, se não houver letras, as "sem letras" serão exibidas; A barra de progresso e o tempo mudarão à medida que a música toca.
(3) Clique no botão anterior (linha vertical + triângulo) e a música anterior será tocada: se houver letras, as letras serão exibidas rolando e, se não houver letras, a "letra não" será exibida; A barra de progresso e o tempo mudarão à medida que a música toca.
Clicar no botão Reproduzir (Triângulo) mudará para o botão Pausa (linhas verticais duplas) e a música também mudará do estado de reprodução para o estado de pausa de acordo.
Clique no botão Avançar (Triângulo + Linha Vertical) e a próxima música será tocada: se houver letras, as letras serão exibidas e, se não houver letras, a "sem letras" será exibida; A barra de progresso e o tempo mudarão à medida que a música toca.
Clicando no botão de áudio (alto -falante), ele se tornará um botão mudo (alto -falante + "x") e a música também se tornará muda de acordo.
Clicar no botão Loop (círculo com setas) se tornará uma única reprodução. Mantenha o botão Loop e o loop único será repetido.
3. Problemas encontrados:
(1) O tamanho do glificon é alterado por tamanho de fonte
Como o ícone de impulso é usado, o tamanho padrão é muito pequeno. Tentei largura e altura, mas não respondi. Percebi que usei o tamanho da fonte para alterar o tamanho.
(2) Str.Place (Oldstr, Newstr)
Ao clicar no botão Play, o status de reprodução será alterado e o ícone do botão será alterado de acordo. Portanto, a substituição é usada, mas não respondeu há muito tempo. Aconteceu que é porque está regenerando uma string, não diretamente na string original, orz
(3) É difícil para os navegadores ler arquivos locais devido a considerações de segurança
Originalmente, planejava usar o LocalStorage para armazenar o conteúdo da lista de músicas, mas tentei com o FileReader do H5 por um longo tempo, mas não havia como. Eu tive que desistir.
O FileReader pode ser usado para ler imagens ou arquivos HTML. Seu método readaDataurl pode obter o caminho do arquivo. Falando nisso, eu realmente quero rir. Eu tentei salvar um arquivo de música. Ok, vamos lá, o quê? O LocalStorage está ficando sem memória? 5m salva um caminho de arquivo? Me engraçado?
As perguntas a seguir estão todas na letra. . . Eu me sinto muito cansado ao fazer isso. . .
(4) Problemas encontrados ao analisar letras
As letras geralmente são arquivos LRC, mas na verdade são texto simples. Use o AJAX para transmitir dados do plano de fundo, mas não há plano de fundo para brincar comigo, para que eu possa copiar diretamente a letra e escrevê -los em uma string como dados mortos.
Foi originalmente planejado usar o Split ('/r/n') para dividir a string nas letras da frase por frase e colocá -la em uma matriz.
Como resultado, relatei vários erros. Depois de um longo tempo de trabalho, finalmente o encontrei nessa divisão. Eu verifiquei on -line por um longo tempo e acabou sendo o pote JS.
Como a sintaxe da JS não force um semicolon a ser adicionado no final, o uso da quebra da linha do sistema (ou seja, retorno do carro) ficará preso. Existem dois planos de resposta principal:
1) Exclua manualmente o caractere nova e use /n nova linha. Esta solução terá um novo efeito na página.
2) Adicione / Antes do caractere de quebra da linha do sistema, esse esquema não tem efeito de quebra de linha na página
(5) Problemas encontrados ao rolar letras
Depois que as letras são adicionadas com sucesso, ela é exibida perfeitamente, mas deve ser sincronizada com a música. Comparando com o tempo atual de reprodução, quanto a lista de letras correspondente se move para cima, quando as letras estão vazias, o julgamento final de fronteira e, depois que todos esses problemas são resolvidos, uma reprodução de loop aparece e as letras não podem ser exibidas novamente. Depois de muito tempo, fui lá. Foi porque quando o loop = true, o evento final não pôde ser ouvido. Não havia jeito, então eu só podia abandonar o loop e acrescentar o julgamento do loop ao evento final.
Bem, é muito bom, perfeitamente exibido, e estou um pouco animado. É um pouco bagunçado em todos os lugares, e o teste mostra se há algum problema. Quando pensei que seria possível terminar, cometi outro erro [indiFference.jpg], então vamos ajustá -lo. Primeiro descubra o motivo do erro. Na ferramenta de desenvolvedor da F12 (fui ao Baidu, que é o que escrevi acima), vi que duas letras foram adicionadas ao mesmo tempo, então a rolagem para cima será tão rápida e vai pular para cima e para baixo um tempo. O culpado foi encontrado, setTimeout. Por ser uma chamada recursiva, é necessário clcleartimeout para esclarecê -lo. OK, basicamente não há problema agora.
Mais tarde:
Ah, e, porque sou fascinado recentemente com o cervo vermelho, nomeei gentilmente meu jogador "Marrocos Player" ~ [Big Brother Bihart] Levou três dias para fazer essa demonstração, e as letras sozinhas foram ajustadas mais da metade do tempo. E você pode ver que os principais problemas encontrados foram os problemas de exibição da letra, e eu estava bêbado. No entanto, não importa o quê, finalmente consegui. Vendo que finalmente foi lançado normalmente, a sensação de realização ainda era muito boa. Embora tenha sido feito, assim como eu estava escrevendo este blog, encontrei o erro ORZ novamente.
O exposto acima é o que o editor apresentou a você para criar um simples player de música usando o boostrap html5+. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!