diff --git a/src/content/blog/blog-44.md b/src/content/blog/blog-44.md index 0bfa1bc..6d9c010 100644 --- a/src/content/blog/blog-44.md +++ b/src/content/blog/blog-44.md @@ -7,7 +7,7 @@ postSlug: building-a-tic-tac-toe-game-in-angular-a-beginners-guide featured: false draft: false tags: - - JavaScript + - Angular ogImage: "" description: "Learn how to build a Tic Tac Toe game in Angular v19 from scratch. This beginner-friendly guide will walk you through creating a simple yet engaging game using Angular's component-based architecture." --- diff --git a/src/content/blog/blog-45.md b/src/content/blog/blog-45.md new file mode 100644 index 0000000..f6df9be --- /dev/null +++ b/src/content/blog/blog-45.md @@ -0,0 +1,351 @@ +--- +author: Manthan Ankolekar +pubDatetime: 2024-12-09T08:44:00Z +modDatetime: +title: Building a Modern Music Player App with Angular and Tailwind CSS +postSlug: building-a-modern-music-player-app-with-angular-and-tailwind-css +featured: false +draft: false +tags: + - Angular + - Tailwind CSS +ogImage: "" +description: "Learn how to build a modern music player app using Angular and Tailwind CSS. This tutorial will guide you through creating a sleek and interactive music player with features like track navigation, a custom progress slider, and a curated playlist." +--- + +## Introduction + +In the age of digital music, a sleek and functional music player is essential. This tutorial walks you through creating a music player app using Angular and Tailwind CSS. With features like track navigation, a custom progress slider, and a curated playlist, this app is both visually appealing and highly interactive. + +--- + +**Key Features of Harmonic Beats** + +- **Track Navigation:** Skip forward or backward between tracks. +- **Custom Progress Slider:** Built with CSS for precise playback control. +- **Playlist Management:** Display and select tracks from a scrollable list. +- **Error Handling:** Alerts for playback issues. + +--- + +## Step-by-Step Guide to Building the App + +### 1. **Setting Up the Angular Project** + +Start by setting up an Angular project. If you don't already have Angular CLI installed, do so with: + +```bash +npm install -g @angular/cli +``` + +Then create a new project: + +```bash +ng new music-player +cd music-player +``` + +Install Tailwind CSS: + +```bash +npm install -D tailwindcss postcss autoprefixer +npx tailwindcss init +``` + +Configure `tailwind.config.js` to include Angular components: + +```javascript +module.exports = { + content: [ + "./src/**/*.{html,ts}", + ], + theme: { + extend: {}, + }, + plugins: [], +} +``` + +Add Tailwind directives in `src/styles.css`: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +--- + +### 2. **Designing the UI with Tailwind CSS** + +Use Tailwind CSS to create a modern, responsive UI. Below is the HTML structure for the component: + +```html +
+

Music Player

+ @if (error()) { +
+
+ error_outline +
+

Error

+

{{ error() }}

+
+
+
+ } + + +
+

{{ tracks[currentTrackIndex()].title }}

+

{{ tracks[currentTrackIndex()].artist }}

+
+ + +
+ +
+ + +
+ + + +
+ + +

Track List

+
+ @for (track of tracks; track $index) { +
+

{{ track.title }}

+

{{ track.artist }}

+
+ } + @empty { +

No tracks found

+ } +
+
+``` + +--- + +### 3. **Adding Interactivity** + +Define the logic in `music-player.component.ts`: + +- **Handle Playback:** Play, pause, and navigate tracks. +- **Update Progress:** Monitor and display playback progress. +- **Error Handling:** Provide user feedback for audio issues. + +```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', + }, + { + title: 'Smooth Jazz', + artist: 'Sax and Keys', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3', + }, + { + title: 'Classical Symphony', + artist: 'Orchestra Ensemble', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3', + }, + { + title: 'Electronic Dreams', + artist: 'Synthwave Collective', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3', + }, + { + title: 'Ambient Relaxation', + artist: 'Chillout Lounge', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3', + }, + { + title: 'Country Folk', + artist: 'Acoustic Guitar Trio', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3', + }, + { + title: 'Rocking Blues', + artist: 'Electric Guitar Band', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3', + }, + { + title: 'Hip Hop Beats', + artist: 'Rap Collective', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-9.mp3', + }, + { + title: 'Reggae Vibes', + artist: 'Island Rhythms', + url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-10.mp3', + } + ]; + + currentTrackIndex = signal(0); + isPlaying = signal(false); + progress = signal(0); + error = signal(null); + private audio: HTMLAudioElement | null = null; + + ngOnInit() { + this.loadTrack(); + } + + loadTrack() { + this.audio?.pause(); + this.audio = new Audio(this.tracks[this.currentTrackIndex()].url); + + this.audio.addEventListener('timeupdate', this.updateProgress.bind(this)); + this.audio.addEventListener('ended', this.handleNext.bind(this)); + this.audio.addEventListener('canplay', () => this.error.set(null)); + this.audio.addEventListener('error', () => { + this.error.set('Unable to load audio. Please check the audio source.'); + this.isPlaying.set(false); + }); + } + + handlePlayPause() { + if (this.audio) { + if (this.isPlaying()) { + this.audio.pause(); + } else { + this.audio.play().catch(() => { + this.error.set('Playback failed. Please try again.'); + }); + } + this.isPlaying.set(!this.isPlaying()); + } + } + + scrollToCurrentTrack() { + const container = this.trackListContainer.nativeElement; + const selectedTrack = container.children[this.currentTrackIndex()]; + if (selectedTrack) { + selectedTrack.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + } + } + + handleNext() { + this.currentTrackIndex.set( + (this.currentTrackIndex() + 1) % this.tracks.length + ); + this.loadTrack(); + this.isPlaying.set(true); + this.audio?.play(); + this.scrollToCurrentTrack(); + } + + handlePrevious() { + this.currentTrackIndex.set( + (this.currentTrackIndex() - 1 + this.tracks.length) % this.tracks.length + ); + this.loadTrack(); + this.isPlaying.set(true); + this.audio?.play(); + this.scrollToCurrentTrack(); + } + + handleTrackSelect(index: number) { + this.currentTrackIndex.set(index); + this.loadTrack(); + this.isPlaying.set(true); + this.audio?.play(); + this.scrollToCurrentTrack(); + } + + handleSeek(event: Event) { + const input = event.target as HTMLInputElement; + const value = parseFloat(input.value); + this.progress.set(value); + + if (this.audio) { + const newTime = (value / 100) * this.audio.duration; + this.audio.currentTime = newTime; + } + } + + updateProgress() { + if (this.audio) { + const duration = this.audio.duration || 1; + const currentTime = this.audio.currentTime; + this.progress.set((currentTime / duration) * 100); + } + } +} +``` + +### 5. **Deploy and Test** + +Use Angular CLI to serve the app locally: + +```bash +ng serve +``` + +Visit `http://localhost:4200` to see **Harmonic Beats** in action! + +--- + +**Conclusion** + +In this tutorial, you learned how to build a modern music player app using Angular and Tailwind CSS. By combining Angular's component-based architecture with Tailwind's utility-first CSS framework, you created a visually appealing and interactive music player. Feel free to customize the app further by adding features like volume control, shuffle mode, or a dark mode theme. + +Happy coding! 🚀 + +--- + +### Exploring the Code + +Visit the [GitHub repository](https://github.com/manthanank/music-player) to explore the code in detail. + +---