MusicPlayer

Project Introduction

Code Features

• Music player based on native JavaScript, HTML and CSS.
• Utilize HTML5
  elements for audio playback and control.
• Incorporate features such as home carousel, simulated announcements, music recommendations, etc.
  • Implement timed auto-play of the next item; disable auto-play upon mouse move in.
  • Navigate to the previous/next item by clicking the left and right arrows.
  • The white dots at the bottom dynamically indicate the current project's position within the total projects.
  • Switch items by moving the mouse to the white dot.
• Trigger audio playback events via ontimeupdate, onplay, onpause, and onended events.
  • When audio is playing:
    • The small and large audio player covers rotate with the audio.
    • The small audio player expands a circular progress bar, implemented using the
      tag within an
      tag.
    • The large audio player cover displays a gradient ripple effect.
    • The large audio player progress bar updates in real-time.
  • When audio is paused:
    • Cover rotation, circular and linear progress bars, and gradient ripples all pause.
  • When audio playback ends:
    • Play the next song in the playlist based on the current loop playback status (single loop, list loop, random play).
• Dynamic update and save functionality for the playlist and favorites list.
• Dynamically render the favorites and playlist, allowing for vertical scrolling without affecting other DOM elements.
• Implement song playback, pause, previous/next, audio switch, add/remove to favorites list, add to playlist, and download functionality through event binding and event delegation.
• Implement drag-to-play and click-to-play functionality for the large player progress bar using clientX and offsetLeft.
• Implement left and right scrolling effects for song names that exceed the DOM element using textContent and clientWidth.
• Use CSS animations to implement various keyframe animations.