🎵 HTML-Music-Player

简体中文 / English

一个基于HTML编写的简洁音乐播放器

A simple music player written in HTML

🗄 效果展示

⭐ 特性

1. 通过遵循指定格式，您可以轻松调用此播放器。
2. 将鼠标悬停在封面上并单击，即可切换播放状态。
3. 您也可以使用空格键来切换播放状态。
4. 在拖动进度条时，将显示进度预览，松手时伴有跟进效果。

💻 使用

首先在 HTML 文件中调用外部文件

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

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

在需要调用的位置按照以下格式输入您的音乐信息

<div music Title="音乐名称" Img="封面图片.jpg" File="音乐路径"></div>

使用案例

请根据您的使用场景来选择调用的方式

HTML

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

您也可以通过该方式在静态博客所使用的 Markdown 文件中进行调用，目前已在 Hugo 测试通过。

VUE

<MusicPlayer title="明日への旅路（明日的旅途）" img-src="music.jpg" audio-src="明日への旅路.mp3" />

将 VUE 文件保存在对应路径后，您也可以使用该方式在支持 VUE 调用的程序中使用该播放器。