Xây Dựng Ứng Dụng Nghe Nhạc Hiện Đại Sử Dụng Angular và Tailwind CSS
Trong kỷ nguyên nhạc số, việc sở hữu một ứng dụng nghe nhạc mỹ thuật và tiện dụng đã trở thành nhu cầu thiết yếu. Bài viết này sẽ hướng dẫn bạn từng bước để tạo ra ứng dụng nghe nhạc mang tên Harmonic Beats bằng cách sử dụng Angular và Tailwind CSS. Ứng dụng này sẽ sở hữu những tính năng nổi bật như điều hướng bài hát, thanh trượt tiến độ tùy chỉnh và danh sách phát được tuyển chọn, mang đến trải nghiệm người dùng vừa hấp dẫn vừa tương tác cao.
Các Tính Năng Nổi Bật Của Harmonic Beats
- Điều hướng bài hát: Cho phép người dùng tua tới hoặc tua lại giữa các bài hát một cách dễ dàng.
- Thanh trượt tiến độ tùy chỉnh: Thiết kế bằng CSS giúp kiểm soát tiến độ phát lại một cách chính xác.
- Quản lý danh sách phát: Người dùng có thể xem và chọn bài hát từ danh sách có thể cuộn.
- Xử lý lỗi: Cung cấp cảnh báo các sự cố trong quá trình phát lại.
Hướng Dẫn Từng Bước Để Xây Dựng Ứng Dụng Harmonic Beats
Bước 1: Thiết Lập Dự Án Angular
Để bắt đầu, bạn cần thiết lập một dự án Angular. Nếu bạn chưa cài đặt Angular CLI, hãy thực hiện lệnh sau:
npm install -g @angular/cliSau đó, tạo một dự án mới:
gn new music-player
cd music-playerTiếp theo, cài đặt Tailwind CSS:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initĐịnh cấu hình tệp tailwind.config.js để bao gồm các thành phần Angular:
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}Thêm các chỉ thị Tailwind vào src/styles.css:
@tailwind base;
@tailwind components;
@tailwind utilities;Bước 2: Thiết Kế Giao Diện Người Dùng Với Tailwind CSS
Sử dụng Tailwind CSS để tạo giao diện người dùng hiện đại và tương thích với nhiều thiết bị. Dưới đây là cấu trúc HTML cho thành phần:
html
<div class="w-full h-screen flex flex-col items-center justify-center p-6 bg-gray-800 text-white">
<h1 class="text-3xl font-bold mb-8">Trình Phát Nhạc</h1>
@if (error()) {
<div class="bg-red-500 p-4 mb-4 rounded w-full max-w-md">
<div class="flex items-center">
<span class="material-icons mr-2">error_outline</span>
<div>
<h4 class="font-bold">Lỗi</h4>
<p>{{ error() }}</p>
</div>
</div>
</div>
}
<!-- Bài hát hiện tại -->
<div class="text-center mb-4 w-full max-w-md">
<h2 class="text-2xl font-bold">{{ tracks[currentTrackIndex()].title }}</h2>
<p class="text-gray-400">{{ tracks[currentTrackIndex()].artist }}</p>
</div>
<!-- Thanh trượt tùy chỉnh -->
<div class="relative mb-4 w-full max-w-md">
<input type="range" min="0" max="100" [value]="progress()" (input)="handleSeek($event)"
class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer slider-thumb" />
</div>
<!-- Các điều khiển phát nhạc -->
<div class="flex justify-center space-x-4 mb-6 w-full max-w-md">
<button (click)="handlePrevious()" class="btn">
<i class="fas fa-step-backward"></i>
</button>
<button (click)="handlePlayPause()" class="btn">
@if (isPlaying()) {
<i class="fas fa-pause"></i>
}
@else {
<i class="fas fa-play"></i>
}
</button>
<button (click)="handleNext()" class="btn">
<i class="fas fa-step-forward"></i>
</button>
</div>
<!-- Danh sách bài hát -->
<h3 class="text-xl font-semibold mb-2">Danh Sách Bài Hát</h3>
<div class="h-[200px] w-full max-w-md rounded-md border border-gray-700 p-4 overflow-y-auto custom-scrollbar"
#trackListContainer>
@for (track of tracks; track $index) {
<div class="p-2 cursor-pointer hover:bg-gray-700 rounded-md"
[ngClass]="{ 'bg-gray-700': $index === currentTrackIndex() }" (click)="handleTrackSelect($index)">
<p class="font-medium">{{ track.title }}</p>
<p class="text-sm text-gray-400">{{ track.artist }}</p>
</div>
}
@empty {
<p class="text-gray-400">Không tìm thấy bài hát nào</p>
}
</div>
</div>Bước 3: Thêm Tính Tương Tác
Định nghĩa logic trong music-player.component.ts:
- Xử lý phát lại: Chức năng phát, tạm dừng và điều hướng bài hát.
- Cập nhật tiến độ: Theo dõi và hiển thị tiến độ phát lại.
- Xử lý lỗi: Cung cấp phản hồi cho người dùng về các sự cố liên quan đến âm thanh.
typescript
import { NgClass } from '@angular/common';
import {
Component,
OnInit,
signal,
computed,
ViewChild,
ElementRef,
} from '@angular/core';
interface Track {
title: string;
artist: string;
url: string;
}
@Component({
selector: 'app-root',
imports: [NgClass],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
@ViewChild('trackListContainer') trackListContainer!: ElementRef;
tracks: Track[] = [
{
title: 'Serenity',
artist: 'Piano and Strings',
url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
},
{
title: 'Energetic Beats',
artist: 'Drum and Bass Collective',
url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
},
// ...
];
currentTrackIndex = signal(0);
isPlaying = signal(false);
progress = signal(0);
error = signal<string | null>(null);
private audio: HTMLAudioElement | null = null;
ngOnInit() {
this.loadTrack();
}
// Thực hiện các chức năng như load track, xử lý phát, cập nhật tiến độ...
}Bước 4: Triển Khai và Kiểm Tra
Sử dụng Angular CLI để chạy ứng dụng cục bộ:
gn serveTruy cập vào http://localhost:4200 để xem Harmonic Beats hoạt động!
Kết Luận
Trong hướng dẫn này, bạn đã học cách xây dựng một ứng dụng nghe nhạc hiện đại bằng Angular và Tailwind CSS. Bằng cách kết hợp kiến trúc dựa trên thành phần của Angular với sức mạnh của Tailwind CSS, bạn đã tạo ra một trình phát nhạc hấp dẫn về mặt hình ảnh và tương tác. Bạn có thể tiếp tục tùy chỉnh ứng dụng bằng cách thêm các tính năng như điều khiển âm lượng hoặc chế độ phát ngẫu nhiên để nâng cao trải nghiệm người dùng hơn nữa.
Cảm ơn các bạn đã theo dõi!
source: viblo
