Làm cách nào để thêm trình phát mp3 vào html của tôi?
Xin chào, Hôm nay chúng ta sẽ xem cách chúng ta có thể dễ dàng tạo trình phát nhạc chỉ bằng HTML, CSS và JS. Không có thư viện nào khác. Trình phát nhạc của chúng tôi có ba phần hoặc màn hình. Màn hình chính, màn hình trình phát và phần danh sách phát. Chúng tôi có một thanh trượt hoạt động trơn tru trong phần trang chủ của chúng tôi và chúng tôi cũng có cuộn ngang. Và phần hay nhất của trình phát nhạc này là nó thu nhỏ trình phát nhạc. Có, bạn có thể thu nhỏ và phóng to trình phát. Làm cho dự án này trở thành một trình phát nhạc tuyệt vời
Để xem demo hoặc bạn muốn có video hướng dẫn code đầy đủ để hiểu rõ hơn. Bạn có thể xem hướng dẫn bên dưới
Video hướng dẫn
Tôi đánh giá cao nếu bạn có thể hỗ trợ tôi bằng cách đăng ký kênh youtube của tôi
Vì vậy, không lãng phí thêm thời gian, hãy xem cách viết mã này
Mã số
Trước khi chúng tôi bắt đầu viết mã của mình. Mặc dù nó không phải là ứng dụng Nodejs nhưng ít nhất chúng ta cũng nên xem cấu trúc thư mục của nó
Bạn có thể thấy chúng tôi có một tệp tên là
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
2. Tệp này chứa dữ liệu liên quan đến âm nhạc của chúng tôi. Bạn có thể xem bên dưới
let songs = [
{
name: 'song 1',
path: 'assets/musics/Song 1.mp3',
artist: 'artist 1',
cover: 'assets/images/cover 1.png'
},
{
name: 'song 2',
path: 'assets/musics/Song 2.mp3',
artist: 'artist 2',
cover: 'assets/images/cover 2.png'
},
// +6 more
]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn thấy dữ liệu của chúng tôi JS. bạn sẽ nhận thấy dữ liệu âm nhạc của chúng tôi. chúng tôi đã lưu trữ dữ liệu liên quan đến âm nhạc ở đây
Vì vậy, không lãng phí thêm thời gian, hãy viết mã phần nhà
phần trang chủ
Mở
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
3 và bên trong bắt đầu bằng cách viết cấu trúc HTML cơ bản. Ngoài ra liên kết
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
4 và cả hai tệp JS. Hãy nhớ thêm tệp
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
2 trước
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
6. Nếu không, chúng tôi sẽ không thể truy cập dữ liệu
Sau khi hoàn tất việc liên kết tất cả các tệp, hãy tạo điều đầu tiên. Băng chuyền hình ảnh. Bên trong thẻ cơ thể mã này
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thông báo - bọc băng chuyền bên trong phần tử
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
7
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bạn có thể thấy chúng tôi đang sử dụng biến CSS ở đây, vì vậy chúng tôi sẽ dễ dàng thay đổi chủ đề trình phát nhạc này trong tương lai
đầu raLưu ý rằng điều này được thiết kế cho chế độ xem trên thiết bị di động, đó là lý do tại sao tôi đang sử dụng trình kiểm tra chrome để xem điều này ở kích thước thiết bị di động
Bây giờ hãy tạo Danh sách phát cuộn ngang. Bên trong
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
7
recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
.heading{
margin: 30px 0 10px;
text-transform: capitalize;
font-weight: 400;
font-size: 30px;
}
/* playlists card */
.playlists-group{
position: relative;
width: 100%;
min-height: 200px;
height: auto;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.playlist-card{
flex: 0 0 auto;
max-width: 150px;
height: 100%;
margin-right: 20px;
}
.playlist-card-img{
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 20px;
}
.playlist-card-name{
width: 100%;
text-align: justify;
font-size: 20px;
text-transform: capitalize;
padding: 5px;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu ra
Chúng tôi đã hoàn thành với phần nhà. Nhưng băng chuyền của chúng tôi không hoạt động, vì vậy hãy làm cho nó hoạt động. Mở tệp
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
6 và bắt đầu mã hóa
///// carousels/////////////////
const carousel = [...document.querySelectorAll['.carousel img']];
let carouselImageIndex = 0;
const changeCarousel = [] => {
carousel[carouselImageIndex].classList.toggle['active'];
if[carouselImageIndex >= carousel.length - 1]{
carouselImageIndex = 0;
} else{
carouselImageIndex++;
}
carousel[carouselImageIndex].classList.toggle['active'];
}
setInterval[[] => {
changeCarousel[];
}, 3000];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bạn có thể thấy trước tiên chúng tôi đang chọn phần tử băng chuyền của mình và cứ sau 3 giây, chúng tôi sẽ chuyển đổi hình ảnh lớp
recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
0Bây giờ hãy tạo phần trình phát của chúng tôi
Người chơi
Bắt đầu bằng cách thu nhỏ chế độ xem
song 1
artist 1
00 : 00
00 : 00
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn thấy cấu trúc người chơi của chúng tôi, bạn sẽ nhận thấy chúng tôi có lớp
recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
1 cho các phần tử lô. Lớp recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
1 này chỉ ra rằng phần tử sẽ bị ẩn trong chế độ xem thu nhỏ. Và chúng tôi đã cung cấp cùng một lớp cho tất cả các phần tử để chúng tôi có thể dễ dàng tạo kiểu cho chúng trong CSS
* music player */
/* minimize view */
.music-player-section{
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
background: var[--alpha-color];
backdrop-filter: blur[50px];
transition: 1s;
}
.music-seek-bar{
-webkit-appearance: none;
width: 100%;
position: absolute;
top: -4px;
height: 8px;
background: var[--secondary-color];
overflow: hidden;
}
.music-seek-bar::-webkit-slider-thumb{
-webkit-appearance: none;
height: 10px;
width: 5px;
background: var[--primary-color];
cursor: pointer;
box-shadow: -400px 0 0 400px var[--primary-color];
}
.current-song-name{
font-weight: 300;
font-size: 20px;
text-align: center;
margin-top: 5px;
text-transform: capitalize;
}
.controls{
position: relative;
width: 80%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
font-size: 30px;
}
.controls span{
display: none;
opacity: 0;
transition: 1s;
}
.music-player-section.active .controls{
justify-content: space-between;
}
.music-player-section.active .controls span{
font-size: 25px;
display: block;
opacity: 0.5;
}
.music-player-section.active .controls span.active{
color: var[--primary-color];
opacity: 1;
}
.controls .main i{
margin: 0 5px;
display: none;
}
.controls .main i.active{
display: inline;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Những kiểu này chỉ dành cho chế độ xem thu nhỏ
đầu ra
Bây giờ, hãy tạo kiểu để tối đa hóa chế độ xem
/* maximize music player styles */
.music-player-section .hide{
display: none;
opacity: 0;
transition: 1s;
}
.music-player-section.active .hide{
display: block;
opacity: 1;
}
.music-player-section.active{
width: 100%;
height: 100%;
padding: 30px;
display: flex;
flex-direction: column;
}
.music-player-section.active .music-seek-bar{
position: relative;
display: block;
border-radius: 50px;
margin: auto;
}
.music-player-section.active .current-song-name{
font-size: 40px;
}
.music-player-section.active .controls{
width: 100%;
font-size: 50px;
}
.artist-name{
text-align: center;
font-size: 20px;
text-transform: capitalize;
}
.cover{
width: 30vh;
height: 30vh;
object-fit: cover;
margin: auto;
border-radius: 20px;
box-shadow: var[--shadow];
}
.current-time{
position: absolute;
margin-top: 5px;
left: 30px;
}
.duration{
position: absolute;
margin-top: 5px;
right: 30px;
}
.icon{
position: absolute;
top: 60px;
transform: scale[1.3];
}
.back-btn{
left: 40px;
}
.nav-btn{
right: 40px;
}
/* volume button */
.volume-slider{
-webkit-appearance: none;
width: 100px;
height: 40px;
position: absolute;
right: -35px;
bottom: 80px;
transform: rotate[-90deg];
border-radius: 20px;
background: var[--alpha-color];
overflow: hidden;
opacity: 0;
display: none;
}
.volume-slider.active{
opacity: 1;
display: block;
}
.volume-slider::-webkit-slider-thumb{
-webkit-appearance: none;
height: 40px;
width: 10px;
background: var[--primary-color];
box-shadow: -200px 0 1px 200px var[--primary-color];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Và để kiểm tra các kiểu này, hãy thêm lớp
recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
0 vào lớp recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
4 như thế này
...
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raCuối cùng chúng tôi sẽ làm cho trình phát này hoạt động. Hiện tại, hãy xóa lớp
recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
0 này khỏi phần người chơi. Và hãy tạo phần danh sách phátphần danh sách phát
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu raChúng tôi đã hoàn thành tất cả các kiểu dáng. Xóa cả lớp
recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
0 khỏi phần danh sách phátBây giờ, hãy JS để làm cho ứng dụng âm nhạc này hoạt động đầy đủ
dẫn đường
Chúng tôi có ba phần trong máy nghe nhạc của chúng tôi. Vì vậy, điều rất quan trọng đối với chúng tôi là thiết lập hệ thống điều hướng cho ứng dụng này. Thông qua đó chúng ta có thể dễ dàng điều hướng từ phần này sang phần khác. đúng?
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đây là JS cơ bản và tôi cũng đã thêm nhận xét vào mã. Vì vậy, nếu bạn có bất kỳ nghi ngờ nào về mã này, vui lòng hỏi tôi trong cuộc thảo luận. điều hướng của chúng tôi được thực hiện. Vì vậy, hãy tạo trình phát nhạc của chúng tôi
Âm nhạc
Đối với trình phát nhạc, chúng tôi cần một nguồn âm thanh trong trang của mình, nhưng chúng tôi không có bất kỳ nguồn nào. Vì vậy, để tạo phần tử âm thanh bên trong
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
3. Tạo phần tử này ở đầu thẻ body
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ chúng ta phải tạo rất nhiều chức năng, vì vậy trước khi bắt đầu, hãy nhanh chóng chọn tất cả các thành phần mà chúng ta có thể cần để thao tác
4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đó là rất nhiều lựa chọn, phải không. Bây giờ thiết lập nguồn nhạc
5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tôi khuyên bạn nên xem phần này từ video hướng dẫn vì tôi đã thực hiện mã này ở đó từng phần, từng bước một
Bạn có thể nhận thấy, để đặt thời lượng, chúng tôi đang gọi
recently played
top international
BTS collection
//+3 more
based on your listening
top international
BTS collection
//+3 more
8. Vì vậy, hãy tạo cái này ngay bây giờ
6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bây giờ, hãy thêm các sự kiện phát/tạm dừng
7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chúng tôi đã hoàn tất việc thiết lập nhạc và phát/tạm dừng nó. Bây giờ hãy thực hiện các sự kiện tiến/lùi
8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Khi chúng ta sắp hoàn thành, Bây giờ hãy tạo chức năng của thanh tìm kiếm
9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Và sau khi làm điều này. Tạo các tùy chọn âm lượng và chú thích lặp lại
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Người chơi của chúng tôi đã hoàn thành. Điều cuối cùng chúng tôi phải làm là làm cho danh sách phát của chúng tôi hoạt động. Vì điều đó làm điều này
@import url['//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--background: #141414;
--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba[0, 0, 0, 0.5];
--shadow: 0 15px 40px var[--alpha-color];
}
html{
background: var[--background];
display: flex;
justify-content: center;
}
body{
width: 100%;
height: 100vh;
max-width: 375px;
position: relative;
background: var[--background];
font-family: 'roboto', sans-serif;
color: var[--text-color];
}
::-webkit-scrollbar{
display: none;
}
/* home section */
.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}
/* carousel */
.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var[--shadow];
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}
.carousel img.active{
opacity: 1;
}
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Và đó là nó. Chúng tôi đã hoàn thành mọi thứ. Chúng tôi đã hoàn thành với trình phát, điều hướng, danh sách phát, băng chuyền. Tôi hy vọng bạn hiểu mỗi và tất cả mọi thứ. Nếu bạn có nghi ngờ hoặc tôi đã bỏ lỡ điều gì đó, hãy cho tôi biết trong phần bình luận
Làm cách nào để tạo trình phát nhạc trong HTML?
để bài hát = [ { tên. 'bài hát 1', đường dẫn. 'nội dung/âm nhạc/Bài hát 1. mp3', nghệ sĩ. 'nghệ sĩ 1', cover. 'nội dung/hình ảnh/bìa 1. png' }, { tên. 'bài hát 2', con đường. 'nội dung/âm nhạc/Bài hát 2. mp3', nghệ sĩ. 'nghệ sĩ 2', cover. 'nội dung/hình ảnh/bìa 2. png' }, // +6 chi tiết ].