Làm cách nào để thêm trình phát mp3 vào html của tôi?

Question

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

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 nhạc trong HTML?
HTML có hỗ trợ MP3 không?
Làm cách nào tôi có thể phát nhạc bằng HTML trên trang web của mình?
Chúng tôi có thể thêm âm thanh vào HTML không?

Để 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('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. Hãy 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

@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
 class="heading">recently played
 class="playlists-group">
     class="playlist-card">
        
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
///// 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 
 class="heading">recently played
 class="playlists-group">
     class="playlist-card">
        
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 
 class="heading">recently played
 class="playlists-group">
     class="playlist-card">
        
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 
 class="heading">recently played
 class="playlists-group">
     class="playlist-card">
        
Chúng tôi đã hoàn thành tất cả các kiểu dáng. Xóa cả lớp 
 class="heading">recently played
 class="playlists-group">
     class="playlist-card">
         src="assets/images/cover 9.png" class="playlist-card-img" alt="">
         class="playlist-card-name">top international


 class="playlist-card">
 src="assets/images/cover 2.png" class="playlist-card-img" alt="">
 class="playlist-card-name">BTS collection

//+3 more

 class="heading">based on your listening
 class="playlists-group">
 class="playlist-card">
 src="assets/images/cover 11.png" class="playlist-card-img" alt="">
 class="playlist-card-name">top international

 class="playlist-card">
 src="assets/images/cover 12.png" class="playlist-card-img" alt="">
 class="playlist-card-name">BTS collection

//+3 more

0 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 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 
 class="heading">recently played
 class="playlists-group">
     class="playlist-card">
         src="assets/images/cover 9.png" class="playlist-card-img" alt="">
         class="playlist-card-name">top international

 class="playlist-card">
 src="assets/images/cover 2.png" class="playlist-card-img" alt="">
 class="playlist-card-name">BTS collection

//+3 more

 class="heading">based on your listening
 class="playlists-group">
 class="playlist-card">
 src="assets/images/cover 11.png" class="playlist-card-img" alt="">
 class="playlist-card-name">top international

 class="playlist-card">
 src="assets/images/cover 12.png" class="playlist-card-img" alt="">
 class="playlist-card-name">BTS collection

//+3 more

8. 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 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 ]. 
 


 







Bài Viết Liên Quan










Anh bộ đội cụ hồ gốc bỉ là gì năm 2024



là ai
Hỏi Đáp
Là gì









Tìm hiểu chung về văn bản nghị luận năm 2024



mẹo hay









Sử lý lỗi không lăng được chuột trong sketchup năm 2024



mẹo hay
Công Nghệ
Chuột









Bài tập tìm hằng số cân bằng hoá 11 năm 2024



mẹo hay
Khỏe Đẹp
Bài tập









Băn khoăn có nghĩa là gì năm 2024



là ai
Hỏi Đáp
Là gì
Ngôn ngữ
Nghĩa là gì









Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024



mẹo hay









Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu
Món Ngon
Bánh









Họ tiếng nhật của bạn là gì năm 2024



là ai
Hỏi Đáp
Là gì









Ý nghĩa của header from top là gì năm 2024



mẹo hay
Hỏi Đáp
Là gì
Top List
Top
Header la gì
Footer la gì









Tự học tiếng anh như thế nào hiệu quả năm 2024



mẹo hay
Hỏi Đáp
Thế nào
Học Tốt
Học
Tiếng anh
Học tiếng Anh













Cơ thể con người năm hiến máu bao nhiêu lần năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu
Khỏe Đẹp
Cơ thể









Tuổi đinh mão xây nhà năm nào tốt năm 2024



mẹo hay
Xây Đựng
Xây
Nhà









Khoán chi đến sản phẩm cuối cùng là gì năm 2024



là ai
Hỏi Đáp
Là gì









Các yếu tố cấu thành văn hóa tổ chức năm 2024



mẹo hay









Thế nào là số vô tỉ cho ví dụ năm 2024



mẹo hay
Hỏi Đáp
Thế nào
Ví dụ









Quà trung thu tiếng anh là gì năm 2024



là ai
Hỏi Đáp
Là gì
Học Tốt
Tiếng anh
Mid-Autumn gift









Đẻ mổ tối đa được bao nhiêu lần năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu









Thiết kế quán trà sữa bao nhiêu tiền năm 2024



bao nhieu
Hỏi Đáp
Bao nhiêu
Món Ngon
Trà sữa









Top nước hoa hồng se khít lỗ chân lông năm 2024



mẹo hay
Top List
Top









Lỗi nồi chiên không dầu philips tiếng kêu rất to năm 2024



mẹo hay













Quảng Cáo








Có thể bạn quan tâm




Giải bài tập công nghệ 7 trong vbt bài 31 năm 2024

1 tháng trước
. bởi
FundamentalAirtime





Bóng đèn cực tím 1m2 công suất bao nhiêu watt năm 2024

1 tháng trước
. bởi
TrackingTrilogy





Cơ sở của giá trị hàng hóa là gì năm 2024

1 tháng trước
. bởi
Fast-foodLineage





Cách sửa lỗi trong speakers properties ko hiện enhancement năm 2024

1 tháng trước
. bởi
MilitaryTracing





Giải bài tập toán lớp 5 tập 2 bài 163 năm 2024

1 tháng trước
. bởi
ThoughtlessEnclosure





Miracle in cell number 7 review năm 2024

1 tháng trước
. bởi
UndeniableFiring





Mục tiêu bài học chi tiết đánh giá được năm 2024

1 tháng trước
. bởi
ThunderousFlask





Asias next top model 5 tap 6 năm 2024

1 tháng trước
. bởi
HorribleBattling





Cầu gỗ lim huế bao nhiêu tiền năm 2024

1 tháng trước
. bởi
YieldingSwimmer





Cân bằng sinh học là gì cho ví dụ năm 2024

2 tháng trước
. bởi
UmbilicalProceeding








Toplist được quan tâm



#1

Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước



#2

Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước



#3

Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước



#4

Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước



#5

Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước



#6

Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước



#7

Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước



#8

Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước



#9

Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước






Quảng cáo







Xem Nhiều




Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024

6 ngày trước





Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024

1 tuần trước





Tự học tiếng anh như thế nào hiệu quả năm 2024

1 tuần trước





Bài tập tìm hằng số cân bằng hoá 11 năm 2024

5 ngày trước





Họ tiếng nhật của bạn là gì năm 2024

1 tuần trước





Băn khoăn có nghĩa là gì năm 2024

6 ngày trước





Tìm hiểu chung về văn bản nghị luận năm 2024

3 ngày trước





Anh bộ đội cụ hồ gốc bỉ là gì năm 2024

3 ngày trước





Ý nghĩa của header from top là gì năm 2024

1 tuần trước





Bao cáo đầu tư mua đất để làm văn phòng năm 2024

9 giờ trước





 
Quảng cáo


























Chúng tôi

Giới thiệu
Liên hệ
Tuyển dụng
Quảng cáo





Điều khoản

Điều khoản hoạt động
Điều kiện tham gia
Quy định cookie





Trợ giúp

Hướng dẫn
Loại bỏ câu hỏi
Liên hệ





Mạng xã hội

 Facebook
 Twitter
 LinkedIn
 Instagram









  



Bản quyền © 2021 Học Tốt Inc.