Hỗ trợ
Thanh toán
Tuyển dụng
Liên hệ
Trang chủ » HTML - CSS - Jquery » Hướng Dẫn Cách Tạo Trình Phát Nhạc bằng HTML, CSS và JavaScript
HTML - CSS - Jquery
Hướng Dẫn Cách Tạo Trình Phát Nhạc bằng HTML, CSS và JavaScript
05/09/2023
Tạo một trình phát nhạc bằng HTML, CSS và JavaScript là một việc rất thú vị cho những người đam mê lập trình. Bằng việc sử dụng CSS để thiết kế giao diện cho trình phát nhạc. Bạn có thể tạo các phần tử trực quan như thanh điều khiển, ảnh bìa bài hát và nút bấm theo ý muốn của bạn. CSS cũng cho phép bạn tạo hiệu ứng chuyển động và thay đổi màu sắc để tạo ra trải nghiệm người dùng hấp dẫn, và quan trọng nhất sử dụng JavaScript để thêm tính năng hoạt động cho trình phát nhạc.
Bằng cách sử dụng các sự kiện như "click", "play", "pause" và "timeupdate", bạn có thể điều khiển phát nhạc, cập nhật hiển thị thời gian, và xử lý các tương tác của người dùng. Bạn cũng có thể sử dụng JavaScript để tương tác với API của dịch vụ nhạc để lấy thông tin bài hát, album và ca sĩ thể hiện.
Việc tạo trình phát nhạc bằng HTML, CSS và JavaScript đòi hỏi sự kết hợp tinh tế giữa thiết kế giao diện và lập trình logic. Qua quá trình này, bạn có thể tạo ra một ứng dụng trình phát nhạc độc đáo và tùy chỉnh theo ý muốn, mang lại trải nghiệm âm nhạc tốt hơn cho người dùng của mình.
Sau đây là một số các bước cơ bản để tạo một trình phát nhạc sử dụng HTML, CSS và JavaScript các bạn nhé.
Bước 1: Xây dựng cấu trúc HTML
Bước 2: Tạo CSS để thiết kế giao diện của trình phát nhạc:
Bước 3: Viết mã JavaScript
- Khai báo các biến để Lấy các phần tử trong DOM
- Khai báo biến Lấy Danh sách bài hát
- Tạo hàm Hiển thị thông tin bài hát đầu tiên
- Tạo hàm addEventListener để Xử lý sự kiện như nhấn nút play, pause, next, prev để thực hiện các hành động tương ứng.
- Hiển thị thông tin bài hát và hình ảnh khi bài hát được chọn.
Chúng ta sẽ đi vào chi tiết từng bước trong quá trình tạo một trình phát nhạc sử dụng HTML, CSS và JavaScript mà chúng ta đã đề cập ở trên các bạn nhé.
Code File HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tạo Trình Phát Nhạc Sử Dụng HTML CSS và JavaScript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
</head>
<body>
<audio src="" id="audio"></audio>
<div class="container">
<h1 class="song-name">Song name 1</h1>
<p class="artist">Artist 1</p>
<div class="box-disk">
</div>
<div class="music-slider">
<input type="range" value="0" class="seek-bar"/>
<span class="current-time">00:00</span>
<span class="music-time">00:00</span>
</div>
<div class="controls">
<button class="btn btnback"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
<button class="btn-play pause">
<span></span>
<span></span>
</button>
<button class="btn btnnext"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
</div>
</div>
<script src="song.js"></script>
<script src="Jscript.js"></script>
</body>
</html>
Code File CSS
*{
margin: 0px;padding: 0px;box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background: linear-gradient(186deg, rgba(16,53,123,1) 0%, rgba(23,35,91,1) 93%);
}
.container{
width: 350px;
height: 550px;
border-radius: 20px;
background: #13045d;
box-shadow: 0 40px 90px #13045d;
padding: 30px;
overflow: hidden;
color: aliceblue;
}
.song-name,.artist{
text-align: center;
text-transform: capitalize;
}
.song-name{
font-size: 25px;
font-weight: 500;
margin-bottom: 10px;
}
.artist{
font-size: 15px;
}
.box-disk{
width: 180px;
height: 180px;
border-radius: 50%;
position: relative;
display: block;
margin: 40px auto;
background: url(images/photo-1.jpg) no-repeat top left;
background-size: cover;
box-shadow: 0 0 0 5px rgba(16,53,123,0.8);
animation: rotate 20s linear infinite;
animation-play-state: paused;
}
.box-disk.play{
animation-play-state: running;
}
.box-disk::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: #13045d;
}
.music-slider{
width: 100%;
float: left;
position: relative;
}
.seek-bar{
width: 100%;
height: 5px;
border-radius: 10px;
background: #ccc;
-webkit-appearance: none;
cursor: pointer;
overflow: hidden;
}
.seek-bar::-webkit-slider-thumb{
-webkit-appearance: none;
width: 1px;
height: 20px;
background: forestgreen;
box-shadow: -400px 0 0 400px royalblue;
}
.current-time,.music-time{
font-size: 12px;
}
.music-time{
position: absolute;
float: left;
right: 0;
}
.controls{
width: 60%;
display: flex;
justify-content: space-between;
margin: auto;
margin-top: 20px;
}
.btn-play{
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background: coral;
cursor: pointer;
border: none;
}
.btn-play span{
position: absolute;
top:50%;
left: 25%;
transform: translateY(-50%);
width: 10px;
height: 30px;
border-radius: 2px;
background: beige;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: .5s;
}
.btn-play span:nth-child(2){
left: 55%;
transform-origin: center;
}
.btn-play.pause span:nth-child(2){
transform:translateY(-50%) scaleY(0);
}
.btn-play.pause span:nth-child(1){
width: 35%;
left: 53%;
transform:translate(-50%,-50%);
border-radius: 0;
clip-path: polygon(0 0, 100% 50%, 100% 50%, 0% 100%);
}
.btn-play.pause{
animation: pulse 2s linear infinite;
}
@keyframes pulse{
0%{
box-shadow: 0;
}
50%{
box-shadow: 0 0 0 5px rgba(16,53,123,0.1);
}
100%{
box-shadow: 0 0 0 5px rgba(16,53,123,0.8);
}
}
.btn{
width: 40px;
height: 40px;
background: salmon;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: none;
cursor: pointer;
margin-top: 5px;
}
@keyframes rotate{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
Code Javascript (File song.js)
let songs = [
{
name:'7th Floor Tango - Silent Partner',
path:'music/7th Floor Tango - Silent Partner.mp3',
artist:'Artist Y01',
image:'images/7th Floor Tango - Silent Partner.jpg'
},
{
name:'Arp Bounce - Geographer',
path:'music/Arp Bounce - Geographer.mp3',
artist:'Artist Y01',
image:'images/Arp Bounce - Geographer.jpg'
},
{
name:'BLAAM - Gunnar Olsen HipHop',
path:'music/BLAAM - Gunnar Olsen HipHop.mp3',
artist:'Artist Y01',
image:'images/BLAAM - Gunnar Olsen HipHop.jpg'
},
{
name:'Burner - Gunnar Olsen',
path:'music/Burner - Gunnar Olsen.mp3',
artist:'Artist Y01',
image:'images/Burner - Gunnar Olsen.jpg'
},
{
name:'Cielo - Huma-Huma',
path:'music/Cielo - Huma-Huma.mp3',
artist:'Artist Y01',
image:'images/Cielo - Huma-Huma.jpg'
},
{
name:'Circular - Gunnar Olsen',
path:'music/Circular - Gunnar Olsen.mp3',
artist:'Artist Y01',
image:'images/Circular - Gunnar Olsen.jpg'
},
{
name:'Dat Step - Gunnar Olsen',
path:'music/Dat Step - Gunnar Olsen.mp3',
artist:'Artist Y01',
image:'images/Dat Step - Gunnar Olsen.jpg'
},
{
name:'Detour - Gunnar Olsen',
path:'music/Detour - Gunnar Olsen.mp3',
artist:'Artist Y01',
image:'images/Detour - Gunnar Olsen.jpg'
},
{
name:'Far Away - MK2',
path:'music/Far Away - MK2.mp3',
artist:'Artist Y01',
image:'images/Far Away - MK2.jpg'
},
{
name:'Hooky with Sloane - Bird Creek',
path:'music/Hooky with Sloane - Bird Creek.mp3',
artist:'Artist Y01',
image:'images/Hooky with Sloane - Bird Creek.jpg'
},
];
Code Javascript (File Jscript.js)
let currentSong=0;
const music=document.querySelector('#audio');
const seekbar=document.querySelector('.seek-bar');
const artist=document.querySelector('.artist');
const songname=document.querySelector('.song-name');
const boxdisk=document.querySelector('.box-disk');
const currenttimes=document.querySelector('.current-time');
const musictime=document.querySelector('.music-time');
const btnplay=document.querySelector('.btn-play');
const btnback=document.querySelector('.btnback');
const btnnext=document.querySelector('.btnnext');
btnplay.addEventListener('click',()=>{
if(btnplay.className.includes('pause')){
music.play();
}else{
music.pause();
}
btnplay.classList.toggle('pause');
boxdisk.classList.toggle('play');
});
// Cài đặt bài hát
const setSong=(i)=>{
seekbar.value=0;
let song=songs[i];
currentSong=i;
music.src=song.path;
songname.innerHTML=song.name;
artist.innerHTML=song.artist;
boxdisk.style.backgroundImage=`url('${song.image}')`;
currenttimes.innerHTML='00:00';
setTimeout(()=>{
seekbar.max=music.duration;
musictime.innerHTML =formatTimes(music.duration);
}, 300);
}
setSong(0);
const formatTimes=(time)=>{
let min=Math.floor(time / 60);
if(min<10){
min=`0${min}`;
}
let sec=Math.floor(time % 60);
if(sec<10){
sec=`0${sec}`;
}
return `${min}:${sec}`;
}
// Set seek bar
setInterval(() => {
seekbar.value=music.currentTime;
currenttimes.innerHTML=formatTimes(music.currentTime);
if(Math.floor(music.currentTime)==Math.floor(seekbar.max)){
btnnext.click();
}
}, 500);
seekbar.addEventListener('change',()=>{
music.currentTime=seekbar.value;
});
const playMusic=()=>{
music.play();
btnplay.classList.remove('pause');
boxdisk.classList.add('play');
}
// Next and Preview
btnnext.addEventListener('click',()=>{
if(currentSong>=songs.length-1){
currentSong=0;
}else{
currentSong++;
}
setSong(currentSong);
playMusic();
});
btnback.addEventListener('click',()=>{
if(currentSong<=0){
currentSong=songs.length-1;
}else{
currentSong--;
}
setSong(currentSong);
playMusic();
});
Các bạn có thể tải code về tham khảo ở link bên dưới nhé.
01:00
Video hướng dẫn chi tiết
Bài viết liên quan
15:47 . 03/09/2023
Đoạn mã dưới đây sẽ tạo ra một trang HTML đơn giản hiển thị đồng hồ đếm ngược đến một thời điểm cụ thể. Bạn có thể sửa giá trị của biến endTime để thiết lập thời gian kết thúc đếm ngược.
.jpg)
21:16 . 18/08/2023
Trong HTML, chúng ta tạo các phần tử mà người dùng có thể kéo và thả bằng cách sử dụng thuộc tính draggable. Ví dụ, để làm cho một phần tử có thể kéo và thả, ta có thể sử dụng mã sau
16:06 . 12/08/2023
Hiện tại QR Code được ứng dụng rất nhiều trong cuộc sống hàng ngày của chúng ta, vì sự nhanh chóng đáp ứng của nó. Ví dụ sử dụng điện thoại muốn truy cập vào website bán một món hàng để tra cứu thông tin, thay vì phải gõ một đường dẫn rất dài trên điện thoại, các hãng có thể cung cấp 1 QR Code dán lên sản phẩm là đường dẫn đến trang web. hoặc là việc thanh toán các hóa đơn bằng smartphone qua mã qr trên các ứng dụng ngân hàng rất tiện lợi và nhanh chóng.
20:51 . 29/06/2023
Vòng quay may mắn là một trò chơi đang được rất nhiều các công ty, đơn vị tổ chức thực hiện vào các dịp liên hoan công ty, hoặc lễ kỷ niệm để quay giải thưởng, tri ân, tặng quà.... Dựa vào xác suất may mắn sẽ giúp người chơi nhận được những phần quà giá trị với ô quay được.
11:04 . 25/06/2023
Card slider là tập hợp các thẻ được xếp theo chiều ngang và có tính năng trượt để xem các thẻ ẩn. Thẻ có thể chứa bất kỳ nội dung nào. Giống như thẻ hồ sơ, thẻ sản phẩm thương mại điện tử, thẻ blog tin tức, v.v...
15:04 . 08/07/2022
Trong bài viết này mình sẽ hướng dẫn bạn cách cài đặt để dùng được Office trên Mac vĩnh viễn. Vì thế các tính năng đều đầy đủ không thiếu gì cả. Bạn yên tâm tải và cài đặt nhé.
06:17 . 03/06/2022
Sử dụng máy tính nhiều giờ liền ảnh hưởng đáng kể đến sức khỏe. Hãy dành thời gian quan tâm tới thông điệp từ cơ thể để luôn giữ được “phong độ”. 6 gợi ý sau đây sẽ rất hữu ích với bạn.
06:03 . 03/06/2022
Có rất nhiều blog về marketing, blog làm seo (Search Engine Optimization), nhiều diễn đàn bàn luận về seo, các twitter và facebook chia sẽ thông tin seo … Quá nhiều thông tin làm cho bạn mất phương hướng, nhất là những bạn mới vào nghề tìm hiểu về SEO. Do đó hôm nay, SoftvietDesign chia sẽ kinh nghiệm cho bạn mới vào nghề.
22:06 . 02/06/2022
Không khó nếu bạn đã xác định được rõ mục tiêu và làm việc với đối tác là một công ty chuyên nghiệp trong thiết kế và phát triển các công cụ thương mại điện tử. Bạn có thể định nghĩa theo ISO "là sự thoả mãn yêu cầu của người dùng", không sai nhưng quá chung chung
