{children}
6 | }
7 |
8 | export default ButtonsBox
9 |
--------------------------------------------------------------------------------
/src/components/ButtonsBox.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | width: 100%;
3 | display: inline-grid;
4 | grid-template-columns: repeat(5, auto);
5 | place-items: center;
6 | }
7 |
8 | @media only screen and (max-width: 600px) {
9 | .wrapper {
10 | width: 100%;
11 | grid-template-columns: repeat(3, auto);
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/LoopCurrent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from './LoopCurrent.module.css'
3 |
4 | const LoopCurrent = (props) => {
5 | return (
6 | {children}
6 | }
7 |
8 | export default PageTemplate
9 |
--------------------------------------------------------------------------------
/src/components/PageTemplate.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | width: 100%;
3 | margin: 0 auto;
4 | padding: 0;
5 | position: relative;
6 | }
7 |
8 | @media only screen and (max-width: 600px) {
9 | .wrapper {
10 | padding: 0;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Pause.js:
--------------------------------------------------------------------------------
1 | import styles from './Pause.module.css'
2 | import React from 'react'
3 |
4 | const Pause = (props) => {
5 | return (
6 | {children}
6 | }
7 |
8 | export default PlayerTemplate
9 |
--------------------------------------------------------------------------------
/src/components/PlayerTemplate.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | width: 100%;
3 | border-radius: 10px;
4 | padding: 0 40px;
5 | margin: 0 auto;
6 | background-color: var(--playerBackground);
7 | overflow: auto;
8 | font-family: 'Quicksand', sans-serif;
9 | }
10 |
11 | @media only screen and (max-width: 768px) {
12 | .wrapper {
13 | width: 100%;
14 | }
15 | }
16 |
17 | @media only screen and (max-width: 600px) {
18 | .wrapper {
19 | padding: 0 20px;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/PlaylistItem.js:
--------------------------------------------------------------------------------
1 | import styles from './PlaylistItem.module.css'
2 | import React from 'react'
3 |
4 | const PlaylistItem = (props) => {
5 | return (
6 | 13 | {props.title} 14 |
15 | ) 16 | } 17 | 18 | export default PlaylistItem 19 | -------------------------------------------------------------------------------- /src/components/PlaylistItem.module.css: -------------------------------------------------------------------------------- 1 | .track { 2 | background-color: var(--playlistBackground); 3 | color: var(--playlistText); 4 | font-family: 'Poppins', sans-serif; 5 | text-align: center; 6 | font-size: 16px; 7 | margin: 5px 0; 8 | padding: 3px 0; 9 | cursor: pointer; 10 | border-radius: 5px; 11 | } 12 | 13 | .track:first-child { 14 | margin: 0; 15 | } 16 | 17 | .active { 18 | background-color: var(--playlistBackground); 19 | color: var(--playlistTextHoverActive); 20 | text-align: center; 21 | font-size: 18px; 22 | margin: 5px 0; 23 | padding: 3px 0; 24 | cursor: pointer; 25 | 26 | border-radius: 5px; 27 | } 28 | 29 | .active:first-child { 30 | margin: 0; 31 | } 32 | 33 | .track:hover { 34 | background-color: var(--playlistBackground); 35 | color: var(--playlistTextHoverActive); 36 | border-radius: 5px; 37 | } 38 | -------------------------------------------------------------------------------- /src/components/PlaylistTemplate.js: -------------------------------------------------------------------------------- 1 | import styles from './PlaylistTemplate.module.css' 2 | import React from 'react' 3 | 4 | const PlaylistTemplate = ({ children }) => { 5 | return{children}
6 | }
7 |
8 | export default PlaylistTemplate
9 |
--------------------------------------------------------------------------------
/src/components/PlaylistTemplate.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | width: 100%;
3 | margin: 20px auto 20px auto;
4 | max-height: 425px;
5 | min-height: 120px;
6 | overflow-x: hidden;
7 | padding-right: 10px;
8 | font-family: "Quicksand", sans-serif;
9 | }
10 |
11 | /* width */
12 | .wrapper::-webkit-scrollbar {
13 | width: 5px;
14 | }
15 |
16 | /* Track */
17 | .wrapper::-webkit-scrollbar-track {
18 | border-radius: 10px;
19 | }
20 |
21 | /* Handle */
22 | .wrapper::-webkit-scrollbar-thumb {
23 | background: var(--primaryText);
24 | border-radius: 10px;
25 | }
26 |
27 | @media only screen and (min-width: 768px) {
28 | .wrapper {
29 | width: 90%;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/Previous.js:
--------------------------------------------------------------------------------
1 | import styles from './Previous.module.css'
2 | import React from 'react'
3 |
4 | const Previous = (props) => {
5 | return (
6 |
7 |
24 |
25 | );
26 | };
27 |
28 | export default Progress;
29 |
--------------------------------------------------------------------------------
/src/components/Progress.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: grid;
3 | place-items: center;
4 | width: 100%;
5 | margin-bottom: 20px;
6 | }
7 |
8 | .slider {
9 | -webkit-appearance: none;
10 | width: 100%;
11 | height: 4px;
12 | border-radius: 5px;
13 | outline: none;
14 | opacity: 1;
15 | -webkit-transition: 0.2s;
16 | transition: opacity 0.2s;
17 | }
18 |
19 | .slider::-webkit-slider-thumb {
20 | -webkit-appearance: none;
21 | appearance: none;
22 | width: 25px;
23 | height: 25px;
24 | border-radius: 50%;
25 | background: var(--progressSlider);
26 | cursor: pointer;
27 | }
28 |
29 | .slider::-webkit-slider-thumb:hover {
30 | background: var(--progressSlider);
31 | }
32 |
33 | .slider::-moz-range-thumb {
34 | width: 20px;
35 | height: 20px;
36 | border-radius: 50%;
37 | background: var(--progressSlider);
38 | cursor: pointer;
39 | }
40 |
41 | @media only screen and (max-width: 600px) {
42 | .container {
43 | margin: 40px 0;
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/Search.js:
--------------------------------------------------------------------------------
1 | import styles from './Search.module.css'
2 | import React from 'react'
3 |
4 | const Search = ({ onChange, value, placeholder }) => {
5 | return (
6 |
7 |
14 |
15 | )
16 | }
17 |
18 | export default Search
19 |
--------------------------------------------------------------------------------
/src/components/Search.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | text-align: center;
3 | }
4 |
5 | .search {
6 | font-family: 'Quicksand', sans-serif;
7 | height: 40px;
8 | border: none;
9 | font-size: 18px;
10 | width: 100%;
11 | margin: 0 auto 10px auto;
12 | background-color: var(--searchBackground);
13 | color: var(--searchText);
14 | padding-left: 20px;
15 | border-radius: 10px;
16 | }
17 |
18 | .search::placeholder {
19 | color: var(--searchPlaceHolder);
20 | opacity: 1;
21 | }
22 |
23 | .search:-ms-input-placeholder {
24 | color: var(--searchPlaceHolder);
25 | }
26 |
27 | .search::-ms-input-placeholder {
28 | color: var(--searchPlaceHolder);
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Shuffle.js:
--------------------------------------------------------------------------------
1 | import styles from './Shuffle.module.css'
2 | import React from 'react'
3 |
4 | const Shuffle = (props) => {
5 | return (
6 |
10 | {props.tag}
11 |
12 | )
13 | }
14 |
15 | export default TagItem
16 |
--------------------------------------------------------------------------------
/src/components/TagItem.module.css:
--------------------------------------------------------------------------------
1 | .tag {
2 | background-color: var(--tagsBackground);
3 | color: var(--tagsText);
4 | height: 40px;
5 | min-width: 100px;
6 | display: inline-grid;
7 | place-items: center;
8 | margin: 5px 5px;
9 | transition: transform 0.2s;
10 | padding: 0 10px;
11 | font-family: 'Varela Round', sans-serif;
12 | border-radius: 10px;
13 | font-size: 18px;
14 | }
15 |
16 | .active {
17 | background-color: var(--tagsBackgroundHoverActive);
18 | color: var(--tagsTextHoverActive);
19 | height: 40px;
20 | min-width: 100px;
21 | display: inline-grid;
22 | place-items: center;
23 | margin: 0 5px;
24 | transition: transform 0.3s;
25 | padding: 0 10px;
26 | font-family: 'Varela Round', sans-serif;
27 | cursor: pointer;
28 | border-radius: 10px;
29 | font-size: 18px;
30 | }
31 |
32 | .tag:hover {
33 | background-color: var(--tagsBackgroundHoverActive);
34 | color: var(--tagsTextHoverActive);
35 | cursor: pointer;
36 | transform: scale(1.1);
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/TagsTemplate.js:
--------------------------------------------------------------------------------
1 | import styles from './TagsTemplate.module.css'
2 | import React from 'react'
3 |
4 | const TagsTemplate = ({ children }) => {
5 | return {children}
6 | }
7 |
8 | export default TagsTemplate
9 |
--------------------------------------------------------------------------------
/src/components/TagsTemplate.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: none;
3 | }
4 |
5 | @media only screen and (min-width: 768px) {
6 | .wrapper {
7 | width: 100%;
8 | margin: 20px auto;
9 | height: auto;
10 | color: var(--primaryText);
11 | display: inline-block;
12 | text-align: center;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/Time.js:
--------------------------------------------------------------------------------
1 | import styles from './Time.module.css'
2 | import React from 'react'
3 |
4 | const Time = (props) => {
5 | return {props.time}
6 | } 7 | 8 | export default Time 9 | -------------------------------------------------------------------------------- /src/components/Time.module.css: -------------------------------------------------------------------------------- 1 | .time { 2 | font-family: 'Varela Round', sans-serif; 3 | color: var(--timeColor); 4 | text-align: right; 5 | font-size: 30px; 6 | margin: 0; 7 | } 8 | 9 | @media only screen and (max-width: 600px) { 10 | .time { 11 | width: 100%; 12 | margin: 0 auto; 13 | display: none; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/Title.js: -------------------------------------------------------------------------------- 1 | import styles from './Title.module.css' 2 | import React from 'react' 3 | 4 | const Title = (props) => { 5 | return{props.title}
6 | } 7 | 8 | export default Title 9 | -------------------------------------------------------------------------------- /src/components/Title.module.css: -------------------------------------------------------------------------------- 1 | .title { 2 | color: var(--titleColor); 3 | font-size: 28px; 4 | margin: 0; 5 | } 6 | 7 | @media only screen and (max-width: 600px) { 8 | .title { 9 | width: 100%; 10 | margin-bottom: 0; 11 | text-align: center; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Volume.js: -------------------------------------------------------------------------------- 1 | import styles from './Volume.module.css' 2 | import React from 'react' 3 | 4 | const Volume = (props) => { 5 | return ( 6 |
7 |
21 |
22 | )
23 | }
24 |
25 | export default Volume
26 |
--------------------------------------------------------------------------------
/src/components/Volume.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: grid;
3 | place-items: center;
4 | width: 100%;
5 | min-height: 60px;
6 | }
7 |
8 | .slider {
9 | -webkit-appearance: none;
10 | width: 70%;
11 | height: 3px;
12 | border-radius: 5px;
13 | background: var(--volumeSlider);
14 | outline: none;
15 | opacity: 1;
16 | -webkit-transition: 0.2s;
17 | transition: opacity 0.2s;
18 | }
19 |
20 | .slider::-webkit-slider-thumb {
21 | -webkit-appearance: none;
22 | appearance: none;
23 | width: 20px;
24 | height: 20px;
25 | border-radius: 50%;
26 | background: var(--volumeSlider);
27 | cursor: pointer;
28 | }
29 |
30 | .slider::-webkit-slider-thumb:hover {
31 | background: var(--volumeSlider);
32 | }
33 |
34 | .slider::-moz-range-thumb {
35 | width: 20px;
36 | height: 20px;
37 | border-radius: 50%;
38 | background: var(--volumeSlider);
39 | cursor: pointer;
40 | }
41 |
42 | @media only screen and (max-width: 800px) {
43 | .wrapper {
44 | display: none;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/icons/loop_current.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/loop_current.png
--------------------------------------------------------------------------------
/src/icons/loop_none.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/loop_none.png
--------------------------------------------------------------------------------
/src/icons/next.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/next.png
--------------------------------------------------------------------------------
/src/icons/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/pause.png
--------------------------------------------------------------------------------
/src/icons/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/play.png
--------------------------------------------------------------------------------
/src/icons/previous.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/previous.png
--------------------------------------------------------------------------------
/src/icons/shuffle_all.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/shuffle_all.png
--------------------------------------------------------------------------------
/src/icons/shuffle_none.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NFhook/audio-player/9d230022627b7304bb6bb2b92558eb0d123315a4/src/icons/shuffle_none.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import styles from "./styles/Player.module.css";
2 | import { createGlobalStyle } from "styled-components";
3 | import React, { useState, useEffect, useRef } from "react";
4 |
5 | import PageTemplate from "./components/PageTemplate";
6 | import PlayerTemplate from "./components/PlayerTemplate";
7 | import Title from "./components/Title";
8 | import Time from "./components/Time";
9 | import Progress from "./components/Progress";
10 | import ButtonsBox from "./components/ButtonsBox";
11 | import LoopCurrent from "./components/LoopCurrent";
12 | import Previous from "./components/Previous";
13 | import Play from "./components/Play";
14 | import Pause from "./components/Pause";
15 | import Next from "./components/Next";
16 | import Shuffle from "./components/Shuffle";
17 | import Volume from "./components/Volume";
18 | import PlaylistTemplate from "./components/PlaylistTemplate";
19 | import PlaylistItem from "./components/PlaylistItem";
20 | import TagsTemplate from "./components/TagsTemplate";
21 | import TagItem from "./components/TagItem";
22 | import Search from "./components/Search";
23 |
24 | import loopCurrentBtn from "icons/loop_current.png";
25 | import loopNoneBtn from "icons/loop_none.png";
26 | import previousBtn from "icons/previous.png";
27 | import playBtn from "icons/play.png";
28 | import pauseBtn from "icons/pause.png";
29 | import nextBtn from "icons/next.png";
30 | import shuffleAllBtn from "icons/shuffle_all.png";
31 | import shuffleNoneBtn from "icons/shuffle_none.png";
32 |
33 | const colors = `html{
34 | --tagsBackground: #9440f3;
35 | --tagsText: #ffffff;
36 | --tagsBackgroundHoverActive: #2cc0a0;
37 | --tagsTextHoverActive: #ffffff;
38 | --searchBackground: #18191f;
39 | --searchText: #ffffff;
40 | --searchPlaceHolder: #575a77;
41 | --playerBackground: #18191f;
42 | --titleColor: #ffffff;
43 | --timeColor: #ffffff;
44 | --progressSlider: #9440f3;
45 | --progressUsed: #ffffff;
46 | --progressLeft: #151616;
47 | --volumeSlider: #9440f3;
48 | --volumeUsed: #ffffff;
49 | --volumeLeft: #151616;
50 | --playlistBackground: #18191f;
51 | --playlistText: #575a77;
52 | --playlistBackgroundHoverActive: #18191f;
53 | --playlistTextHoverActive: #ffffff;
54 | }`;
55 |
56 | const Player = ({
57 | trackList,
58 | includeTags = true,
59 | includeSearch = true,
60 | showPlaylist = true,
61 | autoPlayNextTrack = true,
62 | customColorScheme = colors,
63 | }) => {
64 | const [query, updateQuery] = useState("");
65 |
66 | let playlist = [];
67 |
68 | const [audio, setAudio] = useState(null);
69 | const [active, setActive] = useState(false);
70 | const [title, setTitle] = useState("");
71 | const [length, setLength] = useState(0);
72 | const [time, setTime] = useState(0);
73 | const [slider, setSlider] = useState(1);
74 | const [drag, setDrag] = useState(0);
75 | const [volume, setVolume] = useState(0.8);
76 | let [end, setEnd] = useState(0);
77 | const [shuffled, setShuffled] = useState(false);
78 | const [looped, setLooped] = useState(false);
79 |
80 | const [filter, setFilter] = useState([]);
81 | let [curTrack, setCurTrack] = useState(0);
82 |
83 | const GlobalStyles = createGlobalStyle`
84 | ${customColorScheme}
85 | `;
86 |
87 | const fmtMSS = (s) => new Date(1000 * s).toISOString().substr(15, 4);
88 |
89 | useEffect(() => {
90 | const audio = new Audio(trackList[curTrack].url);
91 |
92 | const setAudioData = () => {
93 | setLength(audio.duration);
94 | setTime(audio.currentTime);
95 | };
96 |
97 | const setAudioTime = () => {
98 | const curTime = audio.currentTime;
99 | setTime(curTime);
100 | setSlider(curTime ? ((curTime * 100) / audio.duration).toFixed(1) : 0);
101 | };
102 |
103 | const setAudioVolume = () => setVolume(audio.volume);
104 |
105 | const setAudioEnd = () => setEnd((end += 1));
106 |
107 | // events on audio object
108 | audio.addEventListener("loadeddata", setAudioData);
109 | audio.addEventListener("timeupdate", setAudioTime);
110 | audio.addEventListener("volumechange", setAudioVolume);
111 | audio.addEventListener("ended", setAudioEnd);
112 |
113 | setAudio(audio);
114 | setTitle(trackList[curTrack].title);
115 |
116 | return () => {
117 | audio.pause();
118 | };
119 | }, []);
120 |
121 | const tags = [];
122 | trackList.forEach((track) => {
123 | track.tags.forEach((tag) => {
124 | if (!tags.includes(tag)) {
125 | tags.push(tag);
126 | }
127 | });
128 | });
129 |
130 | const shufflePlaylist = (arr) => {
131 | if (arr.length === 1) return arr;
132 | const rand = Math.floor(Math.random() * arr.length);
133 | return [arr[rand], ...shufflePlaylist(arr.filter((_, i) => i != rand))];
134 | };
135 |
136 | const isInitialMount = useRef(true);
137 | useEffect(() => {
138 | if (isInitialMount.current) {
139 | isInitialMount.current = false;
140 | } else {
141 | if (shuffled) {
142 | playlist = shufflePlaylist(playlist);
143 | }
144 | !looped && autoPlayNextTrack ? next() : play();
145 | }
146 | }, [end]);
147 |
148 | useEffect(() => {
149 | if (audio != null) {
150 | audio.volume = volume;
151 | }
152 | }, [volume]);
153 |
154 | useEffect(() => {
155 | if (audio != null) {
156 | pause();
157 | const val = Math.round((drag * audio.duration) / 100);
158 | audio.currentTime = val;
159 | }
160 | }, [drag]);
161 |
162 | const play = () => {
163 | setActive(true);
164 | audio.play();
165 | };
166 |
167 | const pause = () => {
168 | setActive(false);
169 | audio.pause();
170 | };
171 |
172 | const loop = () => {
173 | setLooped(!looped);
174 | };
175 |
176 | useEffect(() => {
177 | if (audio != null) {
178 | audio.src = trackList[curTrack].url;
179 | setTitle(trackList[curTrack].title);
180 | play();
181 | }
182 | }, [curTrack]);
183 |
184 | const previous = () => {
185 | const index = playlist.indexOf(curTrack);
186 | index !== 0
187 | ? setCurTrack((curTrack = playlist[index - 1]))
188 | : setCurTrack((curTrack = playlist[playlist.length - 1]));
189 | };
190 |
191 | const next = () => {
192 | const index = playlist.indexOf(curTrack);
193 | index !== playlist.length - 1
194 | ? setCurTrack((curTrack = playlist[index + 1]))
195 | : setCurTrack((curTrack = playlist[0]));
196 | };
197 |
198 | const shuffle = () => {
199 | setShuffled(!shuffled);
200 | };
201 |
202 | const playlistItemClickHandler = (e) => {
203 | const num = Number(e.currentTarget.getAttribute("data-key"));
204 | const index = playlist.indexOf(num);
205 | setCurTrack((curTrack = playlist[index]));
206 | play();
207 | };
208 |
209 | const isInitialFilter = useRef(true);
210 | useEffect(() => {
211 | if (isInitialFilter.current) {
212 | isInitialFilter.current = false;
213 | } else {
214 | if (!playlist.includes(curTrack)) {
215 | setCurTrack((curTrack = playlist[0]));
216 | }
217 | }
218 | }, [filter]);
219 |
220 | const tagClickHandler = (e) => {
221 | const tag = e.currentTarget.innerHTML;
222 | if (!filter.includes(tag)) {
223 | setFilter([...filter, tag]);
224 | } else {
225 | const filteredArray = filter.filter((item) => item !== tag);
226 | setFilter([...filteredArray]);
227 | }
228 | };
229 |
230 | return (
231 |
258 |
265 |
266 |