使用 python 网页播放器（基于Python Flask）附源码

最新推荐文章于 2024-09-09 00:00:00 发布

LIY若依

最新推荐文章于 2024-09-09 00:00:00 发布

阅读量2.7k

点赞数 41

文章标签： python flask 网络编程后端Python

本文链接：https://blog.csdn.net/m0_74972192/article/details/140882184

版权

介绍

这是一个基于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>

效果图如下：

扩展

播放列表功能：添加播放列表功能，允许用户创建和管理多个播放列表。
搜索功能：实现搜索功能，允许用户根据歌曲名称或艺术家搜索音乐。
用户认证：添加用户认证功能，允许用户注册、登录并保存他们的播放列表和偏好设置。
响应式设计：改进用户界面，使其在不同设备上都能良好显示，包括手机和平板电脑。

结论

这个简单的音乐播放器应用程序演示了如何使用Python Flask构建一个功能强大的Web应用程序，用于管理和播放音乐。你可以根据自己的需求进一步扩展和优化这个应用程序，例如添加更多音乐管理功能或改进用户界面。

爬虫项目推荐

其他项目推荐

总结

这个简单的音乐播放器应用程序演示了如何使用 Python Flask 构建一个功能强大的 Web 应用程序，用于管理和播放音乐。通过这个项目，你可以学习到如何使用 Flask 创建路由、处理静态文件、渲染模板以及实现基本的前端交互。你可以根据自己的需求进一步扩展和优化这个应用程序，例如添加更多音乐管理功能或改进用户界面。

欢迎在评论区留言。继续探索和学习，祝你在深度学习的旅程中取得更多的成果！🚀

希望这个博客对你有所帮助！如果你有任何问题需要进一步的指导，请随时提问。继续加油！ 🚀

LIY若依

关注

41
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用 python 网页播放器（基于Python Flask）附源码

这是一个基于Python Flask的网页播放器，你可以使用它来管理和播放你的音乐文件。显示音乐列表和封面图片点击音乐列表中的歌曲封面图片即可播放对应的音乐支持音乐的播放、暂停和控制这个简单的音乐播放器应用程序演示了如何使用 Python Flask 构建一个功能强大的 Web 应用程序，用于管理和播放音乐。通过这个项目，你可以学习到如何使用 Flask 创建路由、处理静态文件、渲染模板以及实现基本的前端交互。
复制链接

扫一扫