README_EN.md

🎵 HTML-Music-Player

简体中文 / English

A simple music player written in HTML

🗄 Music Player Demo

⭐ Features

1. Easily invoke this player by following the specified format.
2. Hover the mouse over the cover and click to toggle the play status.
3. You can also use the spacebar to toggle the play status.
4. While dragging the progress bar, a progress preview will be displayed, and when released, it is accompanied by a follow-up effect.

💻 Usage

First, call external files in your HTML file:

<link rel="stylesheet" href="music.css">

<script src="music.js"></script>

Enter your music information in the following format where you want to invoke it:

<div music Title="Music Name" Img="cover image.jpg" File="music path"></div>

Usage Example

Choose the method of invocation according to your use case.

HTML

<div music Title="明日への旅路（Journey to Tomorrow）" Img="music.jpg" File="明日への旅路.mp3"></div>

You can also invoke it in this way in Markdown files used in static blogs, already tested and working with Hugo.

VUE

<MusicPlayer title="明日への旅路 (Journey to Tomorrow)" img-src="music.jpg" audio-src="明日への旅路.mp3" />

After saving the VUE file in the corresponding path, you can use this player in programs that support VUE invocation.