介绍
这是一个基于Python Flask的网页播放器,你可以使用它来管理和播放你的音乐文件。应用程序具有以下功能:
- 显示音乐列表和封面图片
- 点击音乐列表中的歌曲封面图片即可播放对应的音乐
- 支持音乐的播放、暂停和控制
准备工作
确保你的电脑上安装了Python和Flask,并且有一些音乐文件(.mp3)和封面图片(.jpg)保存在本地目录中。
实现
Python Flask 应用程序
import os
from flask import Flask, send_from_directory, render_template
app = Flask(__name__)
# Directory where your songs and covers are located
SONG_DIR = "D:/song"
def get_songs_with_covers():
songs = [f for f in os.listdir(SONG_DIR) if f.endswith('.mp3')]
covers = [f for f in os.listdir(SONG_DIR) if f.endswith('.jpg')]
# Sort songs and covers for consistent ordering
songs.sort()
covers.sort()
songs_with_covers = []
for song in songs:
# Assuming cover image has the same name as the song
cover_name = os.path.splitext(song)[0] + '.jpg'
if cover_name in covers:
songs_with_covers.append({'song': song, 'cover': cover_name})
else:
songs_with_covers.append({'song': song, 'cover': None})
return songs_with_covers
@app.route('/')
def index():
songs_with_covers = get_songs_with_covers()
return render_template('index.html', songs=songs_with_covers)
@app.route('/song/<filename>')
def get_song(filename):
return send_from_directory(SONG_DIR, filename)
@app.route('/cover/<filename>')
def get_cover(filename):
return send_from_directory(SONG_DIR, filename)
if __name__ == '__main__':
app.run(debug=True)
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
.song-list {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.song-list li {
margin: 10px;
cursor: pointer;
text-align: center;
}
.song-list img {
width: 200px; /* 调整图片宽度 */
height: 200px; /* 调整图片高度 */
object-fit: cover;
display: block;
margin: 0 auto;
}
audio {
margin-top: 20px;
width: 300px;
}
</style>
</head>
<body>
<ul class="song-list">
{% for song in songs %}
<li onclick="playSong('{{ song.song }}')">
{% if song.cover %}
<!-- 显示歌曲封面图片 -->
<img src="/cover/{{ song.cover }}" alt="封面">
{% else %}
<!-- 没有封面时显示占位图片 -->
<img src="https://via.placeholder.com/150" alt="无封面">
{% endif %}
<!-- 显示歌曲名称,去掉 .mp3 扩展名 -->
<div>{{ song.song.replace('.mp3', '') }}</div>
</li>
{% endfor %}
</ul>
<audio id="audioPlayer" controls>
<source id="audioSource" src="" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<script>
function playSong(song) {
const audioPlayer = document.getElementById('audioPlayer');
const audioSource = document.getElementById('audioSource');
// 设置音频源路径
audioSource.src = `/song/${song}`;
// 加载并播放音频
audioPlayer.load();
audioPlayer.play();
}
</script>
</body>
</html>
效果图如下:
扩展
- 播放列表功能:添加播放列表功能,允许用户创建和管理多个播放列表。
- 搜索功能:实现搜索功能,允许用户根据歌曲名称或艺术家搜索音乐。
- 用户认证:添加用户认证功能,允许用户注册、登录并保存他们的播放列表和偏好设置。
- 响应式设计:改进用户界面,使其在不同设备上都能良好显示,包括手机和平板电脑。
相关类型扩展
- 视频播放器:可以尝试使用 Flask 和 HTML5 实现一个视频播放器,支持播放本地视频文件。
- 在线流媒体:了解如何使用 Flask 和流媒体服务(如 YouTube API)构建一个在线流媒体应用。
- 多媒体管理系统:开发一个更复杂的多媒体管理系统,支持音频、视频和图片的管理和播放。
结论
这个简单的音乐播放器应用程序演示了如何使用Python Flask构建一个功能强大的Web应用程序,用于管理和播放音乐。你可以根据自己的需求进一步扩展和优化这个应用程序,例如添加更多音乐管理功能或改进用户界面。
爬虫项目推荐
- 使用 Python 指定内容 爬取百度引擎搜索结果-CSDN博客
- 使用Python和Selenium爬取QQ新闻热榜-CSDN博客
- 使用Selenium 和 Python 抓取快手网页大量评论-CSDN博客
- 使用 Python 和 Selenium 爬取快手视频 附源码-CSDN博客
- 如何使用Python、Selenium 爬取酷狗音乐网站的歌曲信息-CSDN博客
- 使用Python 和 Selenium 抓取 酷狗 音乐专辑 附源码-CSDN博客
其他项目推荐
- 使用 TensorFlow 和 CIFAR-10 数据集进行图像分类-CSDN博客
- 在 Python 中编写一个简单的文件搜索工具-CSDN博客
- 使用Python从.exe文件中提取图标_提取文件图标-CSDN博客
- Python 文件搜索程序详解与实现-CSDN博客
- 使用Python 进行文本情感分析-CSDN博客
- 使用 Python和PyQt5 打造 你的专属文件查询工具! 附源码-CSDN博客
- 用Python和PyQt5打造你的专属音乐播放器!轻松创建带封面的音乐列表-CSDN博客
总结
这个简单的音乐播放器应用程序演示了如何使用 Python Flask 构建一个功能强大的 Web 应用程序,用于管理和播放音乐。通过这个项目,你可以学习到如何使用 Flask 创建路由、处理静态文件、渲染模板以及实现基本的前端交互。你可以根据自己的需求进一步扩展和优化这个应用程序,例如添加更多音乐管理功能或改进用户界面。
欢迎在评论区留言。继续探索和学习,祝你在深度学习的旅程中取得更多的成果!🚀
希望这个博客对你有所帮助!如果你有任何问题需要进一步的指导,请随时提问。继续加油! 🚀