Construa um simples leitor de música com reagir

Feb 4, 2026

Como

Reagir É uma popular biblioteca JavaScript para construir interfaces de usuário, e neste tutorial vou mostrar como usá-lo para construir um simples player de música interativa. Vamos trabalhar em Codepen, e você também pode escrever este projeto offline dentro de um aplicativo reagir, já que todos os componentes podem ser portados para um repo muito facilmente.

Nós vamos explorar adereços , Estado e como os componentes trabalham juntos e se comunicam uns com os outros dentro do ecossistema reagir. Nós também estamos usando Font Awesome , então certifique-se de que está incluído dentro do seu painel CSS CDEPEN.

Para te levantar e correr com reagir muito rapidamente, eu montei uma coleção para você em codepen e dividi-lo em fases para que você possa pular em qualquer ponto, garfo o passo e avançar de lá. Eu também escrevi o CSS para você, para que você possa se concentrar apenas em reagir e como tudo está funcionando.

Criar a interface do usuário reagir

Vamos começar! Primeiro, temos que criar alguns componentes em reagir. Nós vamos levar o código de Etapa 1 na caneta que acompanha e convertê-lo em componentes. Vamos começar criando o componente principal que vamos colocar tudo o mais dentro. Vamos chamar esse componente Jogador .

O código para criar um componente é assim:

 Deixe o jogador = react.createClass ({
  Render: Função () {retorno (
      & lt; div nomeame = "player" & gt;
        & lt; childcomponent / & gt; // Este é um componente filho, aninhado dentro.
      & lt; / div & gt;
  }}
});

Note que você tem que usar nome da classe Porque aula é reservado em javascript. Vá até a codepen fornecida e converta o HTML básico que você encontra lá em reagir componentes.

Em seguida, vamos nos concentrar em mais dois conceitos incríveis em reagir: Estado e adereços . Você não verá nada ainda, porque não temos processado nosso aplicativo.

Renderização, Estado, Adereços

A fim de tornar a nossa maravilha reagir, precisamos contar a ferramenta onde se colocar no DOM. Para fazer isso, usamos Reattom.render () . Você encontrará o código para isso no passo 2 em Codepen.

 reattom.render (& lt; jogador / & gt;, document.queryselector ('corpo'));

Se você fez tudo corretamente, você deve ver o jogador aparecer. Em seguida, vamos construir nosso adereços objeto. adereços é curto para propriedades, e estas são informações que você passa para seus componentes para usar. Precisamos dar ao jogador algumas informações para a pista, então faremos isso agora.

For this demo we've used the artwork from Odesza's 'We Were Young'. Click the image to grab the band's Summer's Gone LP for free — Para esta demonstração, usamos a obra de arte dos 'nós jovens' de Odesza. Clique na imagem para pegar o verão da banda LP GRATUITA

Seu adereços objeto é armazenado dentro getDefaultProps. e deve ser assim:

 GetDefaultProps: Função () {
  Retorna {
    acompanhar: {
      Nome: "Nós éramos jovens",
      Artista: "Odesza",
      Álbum: "Summer se foi",
      Ano: 2012,
      Artwork: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Duração: 192,
      Fonte: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Também precisamos criar um Estado Objeto para armazenar a hora atual da música e do estado Play / Pause:

 getInitialstate: função () {
  Retornar {Playstatus: 'Play', CurrentTime: 0}
}

O estado do seu aplicativo muda constantemente e é armazenado no Estado objeto. Isso é importante para lembrar quando você está escrevendo reagir porque os componentes que dependem desse estado como uma propriedade mudará se o estado. O que faz reagir tão ótimo para trabalhar é que ele calcula as alterações para você e atualiza o DOM eficientemente quando a página é alterada. Tudo fica em sincronia.

Passando adereços e estado

Agora vamos passar adereços e Estado valores em nossos componentes ( etapa 3 ). Nosso Jogador componente deve agora se parecer com isso:

Render: Função () {
  retorno (& lt; divame classname = "jogador" & gt;
    & lt; divame classname = "fundo" estilo = {{'backgroundImage': 'URL (' + this.props.track.artwork + ')'}} & gt; & lt; / div & gt;
    & lt; divameName Div = "Header" & gt; gt; gt classname = "title" & gt; agora jogando & lt; / div & gt; / div & gt;
    & lt; divameName Div = "Artwork" Style = {{'backgroundImage': 'URL (' + this.props.track.artwork + ')'}} & gt; & lt; / div & gt;
    & lt; faixa de trackinformation = {this.props.track} / & gt;
    & lt; scrubber / & gt; e lt; controles / & gt;
    & lt; duração de timestamps = {this.props.track.Duration} CurrentTime = {this.state.currenttime} / & gt;
    & lt; áudio & gt; & lt; sourc = {this.props.track.source} / & gt; & lt; / áudio & gt;
    & lt; / div & gt;
)}

Podemos então escolher esses valores dentro de nossos componentes infantis. Por exemplo:

 var timestamps = reagir.createClass ({
  Render: Função () {retorno (
    & lt; div nomeame = "timestamps" & gt;
      & lt; divameName Div = "Time Time - Atual" & GT; {this.props.currenttime} & lt; / div & gt;
      & lt; div nomeame = "Time Time - Total" & GT; {this.props.Duration} & lt; / div & gt;
    & lt; / div & gt;
  }}
});

Olhar através Etapa 4 em Codepen Para ver como todos os adereços são transmitidos e usados nos componentes da criança.

Cálculo de duração

Os timestamps agora são apenas números simples. Precisamos convertê-los em timestamps antes que eles possam ser usados em nosso aplicativo. Faremos isso escrevendo uma função dentro do nosso componente:

 Convertime: Função (Timestamp) {
    deixe minutos = math.floor (timestamp / 60);
  deixe segundos = timestamp - (minutos * 60);
    if (segundos e lt; 10) {segundos = '0' + segundos; }
    Timestamp = minutos + ':' + segundos;
    Timestamp de retorno;
}

Podemos então usar isso em nosso Timestamps. componente:
{this.convertime (this.props.currenttime)} .

Reproduza e pausa

Nós vamos ligar uma função ao onclick. Evento do botão Play / Pause e passe de volta para o componente principal: & lt; controles isplaying = {this.state.playstatus} onclick = {this.toggleplay} / & gt; .

Nossa alternância é assim:

 TogglePlay: Função () {
  Deixe status = this.state.playstatus;
  Deixe áudio = document.getelementbyid ('audio');
  if (status === 'play') {
    status = 'pausa'; Áudio.Play ();
  } outro {
    Status = 'Play'; audio.Pause ();
  }
  este.setstate ({playstatus: status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Precisamos ajustar o código para que o ícone alterne de uma seta representando 'Play' e duas linhas paralelas representando 'pausa'

Também precisamos adicionar algum código dentro da função de renderização do Controles. Componente para alternar o ícone de 'Play' para 'pausar' e outra função para atualizar os timestamps quando a música estiver sendo reproduzida.

 Render: Função () {
  Deixe os nomes;
  if (this.props.isplaying == 'pausa') {
    classnames = 'fa fa-fw fa-pause';
  } outro {
    classnames = 'fa fa-fw fa-play';
  }
  Retorna {...}
}

Precisamos escrever uma função para lidar com a atualização dos nossos timestamps de antes. É melhor manter este código separado, caso quisermos usá-lo para outra coisa mais tarde.

 UpdateTime: Função (Timestamp) {
  timestamp = math.floor (timestamp);
  este.SetTate ({CurrentTime: Timestamp});
}

Write a function to convert your numbers into timestamps — Escreva uma função para converter seus números em timestamps

Finalmente, precisamos atualizar nosso PLAYTOGGLE. função para chamar o tempo de atualização função em A. setInterval. .

 ...
Áudio.Play ();
deixe _this = isso;
setInterval (função () {
  .....
  _this.updatescrubber (por cento);
  _this.updatetime (Hourtime);
}, 100);
...

Avançando

Então agora você deve ter um jogador de música de trabalho brilhante. Você poderia ir mais aqui e adicionar recursos para esfregar através da música com e.pagex. ou adicione a funcionalidade da lista de reprodução, armazenando os próximos IDs de faixa em um conjunto de matriz, próximo e anteriores. Se você ficar preso, estenda a mão para @mrjackolai. - Eu ficarei feliz em ajudar! Divirta-se e boa sorte.

Este artigo originalmente apareceu em Revista Net. Edição 289; compre aqui !

Artigos relacionados:

20 dicas de javascript para explodir sua mente
Está tudo bem para construir sites que confiam em JavaScript?
Como projetar uma experiência de chatbot

Construa um simples leitor de música com reagir

Criar a interface do usuário reagir

Renderização, Estado, Adereços

Passando adereços e estado

Cálculo de duração

Reproduza e pausa

Avançando

Como - Artigos mais populares

Como usar Imagens de Referência: 13 Dicas Essenciais para Artistas

Chiaroscuro Art: um guia passo a passo

Construa layouts adaptativos sem consultas de mídia

Como usar texturas no Photoshop

Criar uma imagem de paralaxe interativa

Criar um cavaleiro de fantasia realista

Como combinar os conjuntos de aquarela do pintor

Criar efeitos de incêndio 3D

Categorias