Minicurso de ReactJS - Construindo um Tocador de Audiobook - Aula 6
Summary
TLDRThis video script details the development of an audiobook player in React.js, focusing on implementing core functionalities such as track switching and playback control. The tutorial covers creating functions to advance and rewind the audio track by 15 seconds, as well as adjusting the UI for better readability and user experience. The instructor also explains how to enable direct track progression by clicking on the progress bar, utilizing React's state management and HTML5 audio features to synchronize the UI with the audio playback. The script concludes with a call to action for feedback on the React.js experience compared to traditional JavaScript.
Takeaways
- 🎥 The video is a tutorial focused on enhancing an audiobook player application using React JS.
- 🔄 The main objective is to finalize the core functionalities of the audiobook player, including play, pause, and track switching.
- ⏯ The tutorial addresses the issue of not being able to control the progress within the track and introduces a solution for it.
- 🕒 A function named 'advance 15 seconds' is created to move the audio track forward by 15 seconds, demonstrating basic React state manipulation.
- 🔧 The script explains the process of refactoring the code for better readability, emphasizing the importance of clean code practices.
- 📖 It introduces the concept of 'props' in React, detailing how to use them to pass functions and states between components.
- ⏪ A similar function to 'advance 15 seconds' is created for 'retract 15 seconds', showcasing the symmetry in functionality development.
- 📊 The video explains how to use the 'useRef' hook to create a reference to the HTML progress bar, allowing for click interactions.
- 🖱️ A new feature is introduced where clicking on the progress bar advances the audio to the corresponding time, using event handling in React.
- 🛠️ The tutorial touches on the automatic update of the UI in React when state variables change, and how HTML5 audio properties work outside of React's state.
- 👍 The video concludes by encouraging viewers to share their thoughts on React JS compared to traditional JavaScript and to subscribe for more programming content.
Q & A
What is the main focus of the video script?
-The main focus of the video script is to demonstrate how to finalize the main functionalities of an audiobook player application using React JS.
What issue was addressed in the previous lesson mentioned in the script?
-In the previous lesson, the issue addressed was the inability to control the progression within the audio track, meaning the user couldn't click and adjust their position within the track.
What functionality does the 'avançar 15 segundos' function in the script perform?
-The 'avançar 15 segundos' function increases the current time of the audio track by 15 seconds, allowing the user to skip forward in the audiobook.
How does the script improve code readability?
-The script improves code readability by refactoring the code to explicitly state the props being used, making it easier to identify and understand the properties at the beginning of the component.
What is the purpose of the 'useRef' in the script?
-The 'useRef' is used to create a reference to the HTML elements, such as the audio tag and the progress bar, allowing the script to interact with and manipulate these elements directly.
How does the script handle the synchronization of the audio track with the progress bar?
-The script uses the 'onTimeUpdate' event of the audio tag to automatically update the state variable controlling the current time, which in turn updates the progress bar and other related UI elements.
What is the 'retroceder 15 segundos' function and how does it differ from the 'avançar 15 segundos' function?
-The 'retroceder 15 segundos' function decreases the current time of the audio track by 15 seconds, allowing the user to rewind the audiobook. It is the opposite of the 'avançar 15 segundos' function.
How does the script enable the user to jump to a specific point in the audio track by clicking on the progress bar?
-The script calculates the new time based on the proportion of the progress bar clicked by the user, and then sets the audio track's current time to this new calculated time.
What is the significance of the 'offsetX' property in the script?
-The 'offsetX' property is significant as it provides the horizontal distance from the beginning of the element where the click event occurred, which is used to calculate the new time to jump to in the audio track.
How does the script ensure that clicking outside the progress bar but within the container still triggers the jump function?
-The script assigns the jump function to the 'onClick' event of the container element, ensuring that any click within the container, not just on the progress bar itself, will trigger the function.
What is the final functionality implemented in the script and how does it enhance the user experience?
-The final functionality implemented allows the user to control the playback position of the audiobook by clicking on the progress bar or the container, enhancing the user experience by providing a more intuitive and flexible way to navigate the audio content.
Outlines
🎥 Introduction to Audiobook Player Development
This paragraph introduces a video tutorial focused on the development of an audiobook player in a programming context. The speaker welcomes viewers and mentions that the tutorial will continue to build upon the main functionalities of the audiobook player, which was previously started. The speaker also hints at the goal of the session, which is to finalize the player's main features, and invites viewers to watch the video after the intro sequence.
🔄 Implementing Forward and Backward Navigation
The speaker discusses the process of adding forward and backward navigation functionalities to the audiobook player. They explain how to create a function in the app.jsx file that advances the audio track by 15 seconds when called. The function utilizes the audio tag's 'currentTime' property to determine the current playback position and then increments it by 15 seconds. This feature is then integrated into the control buttons component of the application, demonstrating how to bind the new function to a button press event for advancing the audio track.
🔄 Enhancing Control with Progress Bar Interaction
The tutorial continues with the speaker explaining how to enhance the audiobook player's control by allowing users to click on the progress bar to jump to a specific point in the audio track. The speaker details the importance of using React's state to automatically update the UI components like the progress bar and time indicator when the audio 'currentTime' changes. They also demonstrate how to bind the 'onTimeUpdate' event of the audio tag to a state variable to keep the UI in sync with the audio playback.
⏮️ Creating a 15-Second Rewind Function
Building on the previous functionalities, the speaker introduces a new function to rewind the audio track by 15 seconds. They show how to create a similar function to the 'advance 15 seconds' but with the logic reversed to subtract 15 seconds from the current time. This function is then passed to the control component, specifically to the rewind button, allowing users to move back in the audio track with a single click.
🖱️ Enabling Click-to-Seek on the Progress Bar
The speaker describes the process of implementing a click-to-seek feature on the progress bar. They explain how to use the 'useRef' hook to create a reference to the progress bar element and then calculate the new playback time based on the click's position within the progress bar. The calculation involves determining the proportion of the click's horizontal offset relative to the total width of the progress bar and then applying this proportion to the total duration of the audio track to find the new current time.
🔄 Finalizing the Audiobook Player with Enhanced Controls
In the final paragraph, the speaker wraps up the tutorial by demonstrating the completed functionalities of the audiobook player. They show how users can now click on the progress bar to jump to any point in the audio track and how the player responds to forward and backward navigation commands. The speaker also addresses potential usability issues, such as accidentally clicking outside the narrow progress bar, by suggesting enhancements to make the feature more accessible. The video concludes with an invitation for feedback and a tease for future projects.
Mindmap
Keywords
💡React
💡Audiobook Player
💡Functionality
💡Props
💡State
💡Refactoring
💡Progress Bar
💡Event Handling
💡UseRef
💡Click Event
Highlights
Introduction to the video on continuing the development of an audiobook player with main functionalities.
Review of the previous lesson where the player was set up and basic operations were functioning correctly.
The current issue with the player is the inability to control progress within the audio track.
Explanation of the need to implement functionality to advance and rewind within the audio track.
Introduction of a new function to advance the audio by 15 seconds.
Technical details on how to use the audio tag's current time property to implement the advance function.
Integration of the advance function into the control buttons component of the player.
Code refactoring for improved readability by directly using properties instead of the props object.
Explanation of the difference between state variables and regular variables in React.
Demonstration of the player's advance function working with a button click.
Discussion on the automatic update of the progress bar due to state variables.
Introduction of a similar function to rewind the audio by 15 seconds.
Explanation of how the HTML5 audio tag's native capabilities are utilized.
Implementation of functionality to jump to a specific point in the audio by clicking on the progress bar.
Technical explanation on calculating the new time position based on the click's offset within the progress bar.
Solution to ensure the progress bar click functionality works even if not clicked precisely on the bar.
Conclusion of the video with the audiobook player functionalities implemented successfully.
Invitation for feedback on the React JS experience compared to traditional JavaScript.
Closing remarks and预告 of the next video in the series.
Transcripts
fala impressionador bem-vindo a mais um
vídeo aqui da # programação e no vídeo
de hoje a gente continua aqui o nosso
Player do audiobook mas com um detalhe é
que agora a gente vai finalizar as
funcionalidades principais do nosso
Player e tudo isso aqui na aula de hoje
logo após da vinheta Então bora
[Música]
lá então vamos lá galera na aula passada
a gente fez o seguinte a gente preparou
aqui todo o nosso Player que tá aqui
funcionando
a gente consegue trocar a
faixa a gente consegue fazer a troca de
faixa a gente consegue operar tudo
corretamente você vê que tudo funciona
aqui bem certinho só que a gente não
consegue fazer o controle aqui de bom
progressão dentro da faixa isso é eu não
consigo clicar aqui e modificar onde eu
estou dentro da faixa não é verdade bom
nesse caso eu tenho que fazer alguma
coisa a respeito e é isso que a gente
vai fazer vamos lá então para isso eu
venho aqui no
app.jsx e o que que eu quero fazer eu
quero estabelecer aquelas
funcionalidades primeiro de avançar e de
retroceder ali dentro daquela faixa e
você vai ver que elas são bem simples na
verdade bem intuitivas para isso eu vou
fazer uma função aqui aqui ó escrever
uma nova
função
avançar 15 segundos beleza isso aqui é o
nome da função não podia ser mais
descritivo vou pegar aqui vou construir
essa função aqui e o que que ela vai
fazer adivinha ela vai pegar exatamente
ela vai fazer exatamente o que a gente
imagina que é pegar a tag de áudio tá eu
tenho uma referência tag de áudio já
preparada ali que a gente já preparou
das aulas passadas tag de audio. current
para pegar ali o elemento de fato tag de
áudio que tem uma propriedade chamada
current time beleza que é o tempo atual
o tempo atual da faixa E olha que
maravilha o tempo atual da faixa dá
justamente Qual é o momento da faixa
Qual é o momento que ele se encontra aí
no tocar da faixa E se eu quero avançar
aqui segundos eu vou simplesmente fazer
isso aqui ó mais igual a 15 beleza super
tranquilo super simples isso aqui que é
o equivalente a pegar e falar que isso
aqui que esse valor aqui vai ser
atualizado pelo qu por isso aqui pelo
mesmo valor acrescido de 15 entendeu
então eu quero acrescer 15 segundos eu
quero acrescentar 15 segundos a esse
elemento eu vou fazer exatamente isso eu
vou botar mais ig a 15 que é uma forma
reduzida mais elegante de escrever isso
aqui beleza e isso aqui olha só se eu
pegar essa função colocar aqui passar
aqui essa função pro nosso componente
botões controle Então vou botar aqui ó
avançar avançar 15 segundos é igual a eu
vou botar aqui avançar 15 segundos Isso
significa que agora eu tenho essa função
sendo recebida aqui dentro desse meu
dentro desse meu componente por meio
desse objeto props a gente também
aprendeu em aulas anteriores e eu vou
até fazer um ajuste aqui no meu código
para melhorar a legibilidade baseado
nisso que a gente aprendeu que é o quê
que a gente não precisa botar
necessariamente props aqui a gente pode
simplesmente E aí fica mais legal mais
elegante mais bonito aqui o código mais
legível se a gente simplesmente ao invés
do objeto props a gente coloca já quais
são as propriedades que a gente vai
utilizar e aqui ó retroceder faixa tocar
ou pausar faixa essas todas aqui que eu
tô tirando aqui do props tá vendo tá
tocando avançar faixa
beleza Daniel qual é a diferença disso O
que que é qual é a diferença do que você
tá fazendo agora porque a gente tinha
antes então é a mesma coisa na verdade o
que eu tô dizendo é o seguinte aqui
quando eu faço essa estrutura eu tô
dizendo por isso que tem essas chaves
aqui olha eu tô recebendo um objeto de
props aqui E esse objeto de props Contém
todas essas informações e essas
informações são relevantes para mim
então já me entrega essas informações É
isso que eu tô dizendo eu tô
explicitando que eu vou utilizar essas
informações e aí Quando eu for utilizar
nos pontos do código em que eu for
utilizar eu não preciso escrever props
pon nome da informação eu só invoco a
informação direto Beleza então você vai
ver que eu tenho uma preocupação com
legibilidade aqui do código e isso aqui
é mais legível né torna a estrutura mais
legível não que anterior estivesse
errado na verdade o resultado é o mesmo
beleza Tá Daniel Por que que você fez
isso exclusivamente por legibilidade do
código e também por quê Porque agora
como essa estrutur assim repara eu
escrevi quatro props aqui aqui eu já
tinha quatro props aqui que eu estava
utilizando e eu vou adicionar uma quinta
pô se eu quiser depois adicionar uma
sexta prop aqui nesse componente vai ser
mais fácil para mim ao entrar no
componente identificar o que que já está
presente aqui sacou porque eu já tenho
uma listagem logo de início beleza é por
isso que eu fiz para melhorar para
facilitar minha vida enquanto
desenvolvedor bom com isso aqui feito eu
tenho acesso a essa funcionalidade aqui
dentro desse componente que significa
que eu posso pegar esse botão aqui por
exemplo de Ah esse botão aqui que é o
botão de avançar 15 segundos na faixa eu
vou fazer o nele on Click belza on Click
eu vou pegar eu vou acessar esse
atributo aqui dentro dessa tag e eu V
dizer que ele vai invocar a função
avançar 15 segundos e aí olha só o que
acontece
aqui qu Gal você tá vendo aqui que tá
funcionando tá vendo eu t clicando aqui
eu t adicionando 15 segundos e ele tá
respeitando ess essa adição Olha só
cliquei aqui cliquei
cliquei cliquei Você tá vendo que tem 15
segundos sendo adicionado toda vez que
eu clico agora eu quero chamar atenção
para você chamar sua atenção para um
detalhe muito importante que é o
seguinte eu disse para você que o lance
do react era fazer uma instrutura que
reagia que atualizava automaticamente a
página na medida em que variáveis de
estado eram atualizadas isso aqui não é
uma variável de estado Putz o minha tag
de áudio não é variável de est variável
de estado é uma variável normal que tá
olhando para uma tag pra tag de áudio né
A minha variável tag áudio ela tá
olhando pra tag de áudio beleza por que
que tá atualizando automaticamente
porque tá né porque eu tenho aqui ó toda
vez que eu clico aqui olha só barra de
progresso avança o tempo aqui atualiza
Por que que tá atualizando
automaticamente se você dar uma olhada
aqui ó no contêiner
Progresso beleza no contêiner Progresso
a gente tem aqui a definição olha do
tempo aqui no tempo atual da faixa sendo
usada para calcular tanto a barra ali de
progresso quanto esse marcador de
posição quanto o a indicação aqui de
qual é o tempo ou seja todas essas
informações aqui são utilizadas em
função dessa variável de estado aqui
beleza então essa variável de estado tá
sendo utilizada para calcular Todas
aquelas informações Isso é o que a gente
fez na aula passada e o que que tá
acontecendo também aqui no gerenciador
de faixa a gente tem aqui essa essa
função aqui esse atributo aqui On Time
update O que que significa ele significa
que quando a tag de áudio tem uma
atualização no tempo dela E é isso que a
gente tá fazendo porque a gente tá
adicionando 15 segundos ela vem e
automaticamente Define um novo valor
para variável de estado para quê para
sincronizar a variável de estado que tá
controlando o tempo atual com o novo
valor lá da tag de áudio Beleza então
isso aqui tá atualizando a variável de
estado e aí a variável de estado sendo
atualizada tudo que é calculado a partir
da variável estado também é atualizado
beleza é por causa disso aqui que a
gente tá conseguindo que as coisas real
estejam todas sincronizadas tudo
certinho beleza então é a gente tá
usando o poder da variável de estado
somado a uma característica a uma a um
poder a uma capacidade do próprio HTML
porque as funcionalidades da tag de
áudio aqui são do próprio HTML eu tô
tirando de lá beleza com isso entendido
o que que eu vou fazer agora eu vou vir
aqui pro app.jsx e eu vou fazer uma
funcionalidade muito parecida só que é
olha só con retroceder 15
segundos que adivinha só vai ser uma
função Idêntica só que ela vai fazer o
oposto
né current time vai ser menos igual
menos igual 15 e aí com isso eu tenho
aqui uma função que vai retroceder 15
segundos na faixa de áudio toda vez que
ela foi executada E aí o que que eu vou
fazer vou passar essa função para esse
componente aqui que tem os meus botões ó
então retrocede aqui em
segundos e aqui dentro do meu componente
botões de controle Ah é por isso que eu
fiz aquela aquela pequena alteração
Aquela pequena refatoração do meu código
beleza refatoração gente isso é um termo
usado para quando a gente vai e quando a
gente reescreve o código fazendo
pequenas alterações não para mudar a
funcionalidade não para corrigir nada
nem para alterar nada mas só para
melhorar a legibilidade do código aqui
eu fiz aquela refatoração porque agora
olha só eu tenho aqui todas essas propós
e eu posso ver aqui que ah ah não
Realmente eu ainda tenho que adicionar
essa retroceder 15 segundos porque ela
ainda não tá presente aqui eu tenho que
dizer que ela é recebida aqui por esse
componente por quê Porque ela sendo
recebida Então ela pode ser utilizada
aqui dentro do componente
especificamente no botão de a flecha no
sentido antihorário aqui ó Arrow Counter
clockwise aqui um
click E aí eu vou dizer que ele vai usar
quando for clicado esse botão aqui vai
retroceder 15 vai Executar a função que
retrocede 15 segundos aí na minha faixa
e olha só o resultado retrocedeu 15
segundos 15 segundos 15 segundos 15
segundos a gente tem aqui tá funcionando
beleza pô errado bacana isso aqui na
verdade foi até relativamente simples a
gente conseguiu fazer aqui a
funcionalidade de avançar e de
retroceder aqui a faixa Pô legal Mas tem
uma funcionalidade a mais que eu
gostaria de colocar que é a seguinte eu
gostaria de clicar aqui na barra de
progresso e fazer o progresso aqui fazer
a minha pular pro ponto em que eu
cliquei Beleza então como é que a gente
vai fazer isso a gente vai vir aqui no
app.jsx primeiro de tudo eu quero
estabelecer mais uma referência porque
eu vou pilotar mais uma tag
HTML então aqui ó
const barra Progresso é igual a use
Breath no Ou seja eu vou preparar essa
variável para ela ter uma referência
mais uma tag exatamente como eu fiz na
tag de áudio ela começa com uma
referência vazia eu vou passar essa
referência aqui pra pro componente que
tem a barra de progresso que é o
componente contêiner Progresso tá então
eu vou botar aqui ó ele tem uma nova
propriedade referência que é igual ao
quê Barra Progresso Ou seja eu passei
essa variável que tem uma referência
vazia aqui para dentro do componente
então aqui dentro do contêiner Progresso
eu vou fazer o seguinte eu vou dizer que
ele recebe essa variável barra Progresso
tá bom tá aqui barra Progresso E aí o
que que eu quero que ele faça com ela eu
quero que ele pegue essa div aqui ó o
progresso Total Essa div é o que
determina Qual é a barra de é que
determina a barra de progresso eu vou
dizer que ela vai estabelecer aqui ó
ref e o que que ela vai usar como
referência essa variável aqui barra de
progresso então com essa estrutura aqui
agora eu eu linki eu juntei eu conectei
aquela variável que eu criei com use RF
aqui nesse atributo aqui basicamente
determinando então que aquela variável
agora vai ter as informações dessa di E
por que que isso aqui é importante para
mim porque eu preciso das informações
dessa div que é responsável pela barra
de progresso inteira para determinar
onde foi o meu clique sacou porque eu
quero clicar na barra de progresso e eu
quero que a música ou que a faixa avance
pro ponto correspondente ao meu clique
beleza como é que a gente faz isso vamos
lá
app.jsx eu vou criar mais uma função e o
nome da minha função vai ser avançar
para beleza avançar para porque ele vai
avançar para onde eu cliquei tá bom
botar
aqui construir aqui uma estrutura de
função vazia e aí o que que eu quero que
aconteça bom primeiro de tudo eu vou
pegar a largura da minha barra de
progresso tá porque eu vou fazer uma
continha matemática mas que ela vai
fazer sentido eu vou explicar PR você
então aqui ó const largura da barra de
progresso ela vai ser o quê Ah barra de
progresso Ponto current beleza porque é
aquilo é mesmo mesma forma lá que a
gente lidava com a tag de áudio para
quando a gente cria uma variável com
esse use ref a gente tem um campo
current e esse campo ele aponta pro
elemento que a gente lincou a essa
variável do use ref beleza ponto a gente
vai botar aqui ó client with client with
é uma propriedade que qualquer elemento
HTML tem que me informa qual é a largura
desse elemento em pixels beleza Pixel
que é a medida ali de que é a medida ali
de comprimento do computador então aqui
ó largura client with beleza que tá aqui
na referência que é uma que tá aqui na
referência do elemento Beleza então aqui
eu tenho a largura do elemento agora eu
vou fazer o seguinte agora eu vou
primeiro de tudo eu vou pegar e vou
botar essa função aqui ó avançar para eu
vou pegar ela e vou passar ela paraa
barra de progresso Beleza então aqui ó
avançar para e eu vou dizer que o
componente contêiner Progresso tem
acesso a essa função por quê Porque eu
quero que essa função esteja associada
que ela seja executada no Clique no
momento em que ela ouviu é um clique na
barra de progresso Beleza então aqui ó
onclick e ele vai executar essa função
avançar para
beleza gente vamos lá isso aqui é do
próprio JavaScript beleza isso aqui é do
próprio JavaScript quando eu clico em
algum elemento houve um evento de clique
beleza houve um evento de clique isso é
o a página da internet o navegador ele é
capaz de perceber que Opa o usuário
clicou aqui beleza então quando eu falo
ou clique eu boto ali a função eu tô
dizendo que o US que o o navegador
identifica um clique naquele elemento e
vai reagir com aquela função Beleza
então o que que eu posso fazer bom aqui
então todas as funções que a gente
estava colocando a gente colocava que
elas não recebiam nenhuma informação mas
tem uma informação que o navegador
disponibiliza por padrão e que a gente
pode usar e aí a gente só precisa
explicitar ela que é uma informação é um
objeto com as informações desse evento
no caso o evento de clique Então vou
botar aqui ó evento Beleza então isso
aqui é padrão eu podia ter usado esse
objeto aqui em qualquer uma dessas
outras funções aqui que eu associei a
qualquer a todos os outros botões ali
que eu botei funcionalidade de clique
lembra Mas aqui é que para nenhum deles
era necessário para esse é por quê
Porque o que que eu vou fazer aqui eu
vou fazer o
seguinte conste a aqui
ah tempo Novo Tempo beleza novo tempo
por quê Porque eu quero pular para um
novo tempo ali na minha faixa e como é
que eu vou fazer esse cálculo bom eu vou
fazer o cálculo do Novo Tempo baseado no
seguinte eu cliquei em algum lugar ali
da minha barra de progresso se eu
cliquei no fim da minha barra de
progresso bom eu cliquei lá no fim da
minha barra de progresso se eu cliquei
no início eu cliquei lá no início vamos
supor que eu cliquei na metade vamos
supor que eu cliquei na metade como é
que eu vou identificar um eu cliquei é
aí que entra esse elemento aqui o evento
por o evento ele tem um campo chamado
Native event beleza Native event e
dentro desse Campo Native event ele tem
um negócio aqui muito legal que é
offset x beleza offset x o que que é
isso offset X é o seguinte ele o evento
o evento e aqui foi um evento de clique
aqui no Native event ele tem explicação
de qual é a partir do início do elemento
onde eu cliquei quanto na horizontal eu
andei Beleza o basicamente quanto da
largura do elemento em pixels eu andei
aqui do início do elemento por que que
eu tô fazendo isso aqui isso aqui na
verdade é uma coisa maior doida mas
Acompanha comigo basicamente é o
seguinte se eu tiver clicado aqui ó
vamos supor que aqui é a metade do
elemento vamos supor que aqui é a metade
do elemento se eu cliquei aqui E esse
elemento tem sei lá 1000 pixels eu
cliquei aqui na parte aqui 500 pixels
Beleza se aqui é a metade do elemento eu
cliquei e ele já tem até aqui 500 pixels
sacou então 500 pixels é a metade de
1000 pixels beleza é isso que eu quero
identificar quantos pixels eu já andei
essa informação vai vir aqui para mim no
offset x beleza essa informação vai vir
no offset x vamos supor que aqui É 10%
aqui da minha barra de progresso eu
cliquei aqui então vai ser um Déo aí dos
Tais 1000 pixels ou seja vai ser 100
pixels sacou E aí a partir dessa
informação do offset X eu vou calcular
Qual é o momento da faixa que eu tenho
que ir para qual momento da faixa eu
tenho que ir por uma questão de
proporcionalidade Beleza você vai ver
isso comigo Olha só offset x ou seja
quanto a partir do início do elemento eu
já em que quanto a partir do início do
elemento eu cliquei sabe em quantos
pixels a partir do início do elemento eu
cliquei Beleza então vou pegar esse
elemento aqui e eu vou dividir pelo qu
pela largura pela cura do elemento sabe
por quê Porque isso aqui agora passa a
não ser uma informação de pixels isso
aqui passa a ser uma informação só de
proporção sacou porque se eu divido pela
largura a largura do elemento é tudo né
é o é a largura inteira da barra vai ser
sei lá os 1000 pixels então se eu clicar
aqui vai ser 1000 so 1000 que dá 1 por
quê Porque eu já tô no final eu já um é
100% né É porque eu já andei a a barra
inteira se eu clicar aqui sei lá se aqui
é 60% da Barra eu cliquei aqui vai ficar
o 600 pixels sobre 1000 pixels que dá
0,6 que dá o 60% sacou Então eu tenho
aqui uma proporção da faixa o quanto da
faixa eu tô para onde percentualmente da
faixa eu tô querendo ir saô esse
percentual ele vai me dar essa
informação é isso que eu quero e aí Olha
só eu vou pegar aqui ó evento Native
event ofs x eu vou dividir pela largura
Isso aqui vai me dar uma informação de
proporção aqui de onde eu quero é uma
proporção ali da barra de Progresso de
onde eu cliquei E aí eu vou pegar isso
aqui e vou fazer o seguinte essa
proporção eu vou pegar e vou multiplicar
ela pelo tempo total da faixa sabe por
quê Porque aí com essa proporção vamos
supor que eu ti tinha aqui sei lá 0,6
60% né 60% vezes o tempo total da faixa
isso vai me gerar um novo nova
informação do tempo que é o quê com 60%
da faixa já completa isso aqui na
verdade vai me dar informação de qual é
o novo tempo que eu quero que eu quero
estabelecer com esse meu clique sacou Se
eu clico aqui que eu quero que aqui que
é sei lá 60% da Barra aqui eu quero que
ele vá para 60% da música concluída
faltando só 40% ou seja eu quero que ele
vá para um lugar da minha música que é
correspondente ao lugar da Barra em que
eu cliquei sacou Se eu clicar aqui no
final eu quero que ele vá pro fim da
música se eu clicar aqui no início eu
quero que ele vá pro início da música se
eu clicar aqui no meio Eu quero que ele
vá pro meio da música se eu clicar aqui
eu quero que ele vá para salá 60% da
música se eu clicar aqui 70% da música
sacou É isso que eu tô fazendo E aí com
isso feito que que eu vou fazer eu vou
pegar aqui olha só vou pegar aqui eu vou
pegar aquele tag
audio ponto
current ponto current time Ou seja a
mesma informação que eu tava usando lá
no avançar e retroceder 15 segundos só
que eu vou fazer o seguinte o tempo
atual da faixa vai ser atualizado para
quê para essa variável novo tempo aqui
que é o Clei beleza com isso aqui feito
Olha
só eu tenho isso aqui então olha só isso
aqui e gente só um segundo se não deu
certo pera aí
Ah tá gente bobagem olha só tá vendo
aqui o componente contêiner barra de
progresso aqui ó contêiner Progresso eu
passei a variável para ele barra de
progresso só que eu variei passei com
esse nome aqui referência então aqui
dentro ele tem que usar esse mesmo nome
né referência beleza
referência E aí aqui ele tá pegando
referência e tá usando aqui não é barra
de progresso beleza aqui fora no app.jsx
é que eu falei ó esse componente espera
uma propriedade referência e eu tô
passando para ele a variável barra de
progresso que vai fazer a vez Dessa
propriedade beleza e aqui dentro tá bom
então ele esperava a propriedade de
referência e ele vai usar essa
propriedade de referência Tá bom eu só
tenho que usar aqui tudo com os nomes
correspondentes se eu tivesse usando
barra de progresso aqui ela teria que
ser barra de progresso aqui para lá
dentro eu poder utilizar barra de
progresso lá dentro do componente mas
com isso tudo aqui feito Vamos lá olha
só com isso aqui feito eu tenho aqui a
capacidade de clicar aqui na minha barra
de progresso e ver o meu progresso sendo
atualizado para onde eu cliquei tá vendo
ó cliquei aqui e aí eu vi aqui o meu
progresso sendo atualizado para onde eu
cliquei beleza gente a gente aqui
manipulou essas informações e conseguiu
com isso gerar aqui aquela
funcionalidade de clicar e aí controlar
o momento atual da faixa baseado em onde
a gente clicou para encerrar eu vou só
dar uma dica aqui tá vendo que ó eu
cliquei aqui beleza tá funcionando tudo
certo ó cliquei aqui também mas se eu
clicar um pouquinho aqui embaixo ele não
vai por quê Porque eu tenho que clicar
especificamente na barra de progresso só
que a barra de progresso é fininha às
vezes assim pô eu erro a mão clico ali
um pouquinho embaixo e aí não vai como é
que eu resolvo isso como é que eu faço
ficar mais fácil de ar essa
funcionalidade aqui eu posso vir aqui no
contêiner de progresso tá vendo
contêiner de progresso eu disse que essa
funcionalidade de avançar a faixa ela
vai ser executada quando eu clicar na
barra de progresso mas olha só a
malandragem aqui eu vou pegar esse on
Click igual avançar para e eu vou
colocar aqui também na tag de cima que é
a tag container que a tag aqui section
que é o contêiner desse componente aqui
beleza basicamente eu T dizendo o
seguinte que todo elemento aqui desse
componente onde eu clicar eu vou
conseguir executar essa função e a isso
aqui é bom porque aqui ó eu não preciso
clicar exatamente na barra de progresso
eu posso clicar aqui um pouco embaixo tá
vendo porque ele ainda responde beleza
isso aqui é muito bom né porque às vezes
sei lá você imagina que você tá fazendo
um aplicativo do celular por exemplo o
usuário às vezes ali tá com um dedo né
operando o seu aplicativo ele erra um
pouco né não clica exatamente ali na
barra de progresso Mas não tem problema
se você botou num elemento maior que a
graça barra de progresso você garante
que a funcionalidade vale pra Barra de
progresso aqui ó tá valendo pra Barra de
progresso mas tá valendo também aqui
para baixo
sabe beleza é isso gente a gente
conseguiu então aqui implementar as
funcionalidades fundamentais aqui dessa
página a gente então fez aqui o nosso
tocador de audiobook aqui inspirado no
tocador do audible e é isso aqui bom
esse é o nosso projeto feito com react
JS Eu espero que você tenha gostado se
você gostou deixa o seu like aproveita
se inscreve aqui no canal para não
perder futuros projetos que a gente vai
lançar aqui dentro do dentro aqui do
universo da programação e também os
vários outros conteúdos aqui do universo
da programação que a gente lança
diariamente aqui no nosso canal e fazer
o seguinte Aproveita e deixa aqui para
mim Você gostou foi o seuu primeiro
contato com react JS O que que você
achou como é que você acha que o react
funciona comparado com o JavaScript
tradicional você preferiu um você
preferiu o outro Fala aí para mim eu tô
interessado em saber aí o que que vocês
TM a dizer beleza gente é isso para essa
aula mas a gente volta na semana que vem
então até lá
Посмотреть больше похожих видео
Synchronising to Music After Effects Ep37/48 [Adobe After Effects for Beginners]
Playing an Audio File - MetaSound Tutorials for Unreal Engine 5
Android for Audiophiles: COMPLETE Guide
Learn Descript in 15 Minutes [Full Tutorial]
12 NEED to Know Logic Pro Tips to Improve Your Workflow w/ SEIDS
Video, Audio & Media in HTML | Sigma Web Development Course - Tutorial #10
5.0 / 5 (0 votes)