Mã html cho trình phát nhạc có danh sách phát

Question

Một thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh Git chấp nhận cả tên thẻ và tên nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi không mong muốn. Bạn có chắc chắn muốn tạo nhánh này không?

Nội dung chính Show

phần trang chủ
Người chơi
phần danh sách phát
dẫn đường
Làm cách nào để tạo trình phát âm thanh trong HTML?
Làm cách nào để tạo danh sách phát nhạc?
Bạn có thể định kiểu trình phát âm thanh HTML không?

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ể ủng hộ 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('https://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('https://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('https://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. Nhớ thêm tệp

@import url('https://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 tệp

@import url('https://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



 class="home-section">
    
     class="carousel">
        
Lư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('https://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
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
]
0
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
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
]
1
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('https://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
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
]
3
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 
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
]
00
Bâ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
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
]
5
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 trình phát của chúng tôi, bạn sẽ nhận thấy chúng tôi có lớp 
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
]
01 cho các phần tử lô. Lớp 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
]
01 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
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
]
8
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
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
]
9
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 
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
]
00 vào lớp 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
]
04 như thế này
@import url('https://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
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
đầu ra
Cuố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 
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
]
00 này khỏi phần người chơi. Và hãy tạo phần danh sách phát
phần danh sách phát


 class="home-section">
    
     class="carousel">
        
Chúng tôi đã hoàn thành tất cả các kiểu dáng. Xóa lớp 
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
]
00 khỏi phần danh sách phát
Bâ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? 


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">



2
Và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 một phần tử âm thanh bên trong 
@import url('https://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


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">
    

3
Và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


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">
    

4
Và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


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">
    

5
Và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 
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
]
08. Vì vậy, hãy tạo cái này ngay bây giờ


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">
    

6
Và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


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">
    

7
Và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


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">
    

8
Và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


 class="home-section">
    
     class="carousel">
         src="assets/images/cover 1.png" class="active" alt="">
         src="assets/images/cover 2.png" alt="">
         src="assets/images/cover 3.png" alt="">
         src="assets/images/cover 4.png" alt="">
         src="assets/images/cover 5.png" alt="">
    

9
Và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('https://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;
}
0
Và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('https://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;
}
1
Và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 âm thanh trong HTML?
Để tạo Trình phát âm thanh tùy chỉnh, chỉ cần ba bước. - . 
 Tạo một tệp HTML và xác định đánh dấu. Chúng tôi tạo một tệp HTML và lưu nó bằng trình phát tên. html. . 
 Tạo tệp js và xác định tập lệnh. Chúng tôi tạo một tệp js và lưu nó bằng trình phát tên. js. . 
 Tạo một tệp CSS và xác định kiểu dáng
 
Làm cách nào để tạo danh sách phát nhạc?
Nhấn và giữ một bài hát.  Từ menu xuất hiện, hãy nhấn vào Thêm vào danh sách phát.  Nhấn vào Danh sách phát mới hoặc chọn danh sách phát hiện có . 
Bạn có thể định kiểu trình phát âm thanh HTML không?
Thẻ âm thanh HTML 5 có thể được tạo kiểu . Bằng cách sử dụng thẻ âm thanh có thuộc tính “điều khiển”, trình phát trình duyệt mặc định được sử dụng. Bạn có thể tùy chỉnh bằng cách không sử dụng các điều khiển của trình duyệt. Bạn cũng có thể thêm các lớp CSS vào từng thành phần và tạo kiểu cho chúng phù hợp.

programming html

Mã html cho trình phát nhạc có danh sách phát

phần trang chủ

Người chơi

phần danh sách phát

dẫn đường

Âm nhạc

Làm cách nào để tạo trình phát âm thanh trong HTML?

Làm cách nào để tạo danh sách phát nhạc?

Bạn có thể định kiểu trình phát âm thanh HTML không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội