Song title is important component in music player application, but what if the song title is too long? it will break the app's interface, to solve that problem we can use marquee.
The marquee works to make the text move and walk sideways, even long song titles won't break the app's interface. In this post I will tell you how to make a marquee for the title track music player in reactjs.
For first, we need to install marquee component for reactjs, in this post we will use react-fast-marquee
npm i react-fast-marquee
After that create component music player with cover image, title song, and audio player
import './marquess.css'; // import the css
const MusicPlayer = () => {
return (
<div className="center-screen">
<div className="music-container">
<img
alt="Album"
src={MUSIC_IMG_URL}
width="300px"
/>
<div className="title-container">
<p>{MUSIC_TITLE}</p>
</div>
<audio controls>
<source src={MUSIC_URL} type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</div>
</div>
);
}
export default MusicPlayer;
Then we will create css for music player like this
Until here we haven't use marquee, we just use tag <p> for title song, now we add the marquee like this
import Marquee from "react-fast-marquee";
...
const MusicPlayer = () => {
return (
...
<div className="title-container">
<Marquee
play={true}
gradient={false}
pauseOnHover={true}
>
<p>{MUSIC_TITLE}</p>
<span className="empty-title"></span>
</Marquee>
</div>
...
);
}
export default MusicPlayer;
In the code above we set the gradient to false, if the gradient is set to true at the start and end of the marquee there will be a gradient, for more options you can see documentation, and we insert marquee insert tag with class title-container to set the marquee width.
Until now the marquee will move, but wait music player title always stay briefly after one movement cycle, for it we will using useState react for set play marquee
import Marquee from "react-fast-marquee";
import { useState } from 'react';
...
const MusicPlayer = () => {
const [marqueeStatus, setMarqueeStatus] = useState(true);
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
const handleCompleteMarquee = async () => {
setMarqueeStatus(false);
await sleep(1000);
setMarqueeStatus(true);
};
return (
...
<Marquee
play={marqueeStatus}
gradient={false}
pauseOnHover={true}
onCycleComplete={async () => handleCompleteMarquee()}
>
<p>{MUSIC_TITLE}-</p>
<span className="empty-title"></span>
</Marquee>
...
);
}
export default MusicPlayer;
In above code on complete cycle we set play marquee to false and sleep to delay before app execute next function, in this code i set delay 1000ms, after waiting 1000ms marquee will play again.
Here the result
Full code
Thanks for reading this post, i hope this post can be useful, if you have question or feedback, you can send message in Contact or leave a comment.
0 Comments