Django实现简单的音乐播放器 3

这篇具有很好参考价值的文章主要介绍了Django实现简单的音乐播放器 3。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 在原有音乐播放器上请求方式优化和增加加载本地音乐功能。

效果:

Django实现简单的音乐播放器 3,# Django项目,django,python,后端

目录

播放列表优化

设置csrf_token

前端改为post请求

视图端增加post验证

加载歌曲

视图

设置路由

模板

加载layui css

加载layui js

增加功能列表

功能列表脚本实现

最终效果

总结


播放列表优化

原有get请求改为post请求。

设置csrf_token

在body标签中设置csrf_token标签

{% csrf_token %}

前端改为post请求

在原来player.js歌曲类基础上把歌曲列表变量改为ajax通过后端接口获取,在歌曲类构造函数中调用设置歌曲信息列表。

注意:因为使用post请求,需要加载django csrf token,否则会出现403响应。

// 获取歌曲列表
getSongs(){
    let mp3list = [];

    let csrf = $('input[name="csrfmiddlewaretoken"]').val();

    $.ajax({
        type: 'POST',
        url: "/media_list",
        data: {id: 1, csrfmiddlewaretoken: csrf},
        dataType: 'json',
        success: function (data) {
            mp3list = data.list;
            // 将mp3list赋值给this.songs
            this.songs = mp3list;
            // 调用渲染歌曲列表的方法
            this.renderSongList();
        }.bind(this),
        error: function (e) {
            console.log("ERROR : ", e);
        }
    });
}

视图端增加post验证

from django.views.decorators.http import require_http_methods


@require_http_methods(['POST'])
def media_list(request):
    """ MP3音乐列表 """

    mediaList = Single.objects.all()

    arr = []
    for item in mediaList:
        arr.append({
            'id': item.id,
            'title': item.title,
            'singer': item.singer,
            'songUrl': item.songUrl,
            'imageUrl': item.imageUrl,
        })


    return JsonResponse({'list': arr})

加载歌曲

在原有基础上增加加载歌曲功能,原来需要手动把歌曲信息添加数据库,修改后可以把歌曲放入static/media目录后,点击播放器的加载歌曲功能即可添加相应歌曲到数据库中。

视图

查找资源目录下所有歌曲信息,加载导入不重复的歌曲信息。

def load_music(request):
    """ 加载本地的歌曲 """

    # 项目路径
    app_path = os.path.abspath(os.path.dirname(__file__))
    # 获取媒体资源目录下所有歌曲文件
    path = app_path + '/../static/media/'
    files = os.listdir(path)

    for file in files:
        print(insert_music(file))

    return HttpResponse('加载本地音乐成功!')


def insert_music(name):
    """ 把歌曲信息插入数据表 """

    # 查询歌曲是否存在
    info = Single.objects.filter(title=name).first()
    if info:
        return True

    ext = 'mp3'
    # 判断文件后缀
    fileInfo = name.split('.')
    if len(fileInfo) != 2:
        return False

    if fileInfo[1] != ext:
        return False

    single = Single()
    single.title = name
    signers = name.split('-')
    single_1 = signers[1].strip('') if len(signers) > 1 else ''
    single.singer = single_1.strip('.mp3')
    single.songUrl = '/static/media/' + name

    # 随机1-10专辑封面图片
    sui_num = random.randint(1, 10)
    single.imageUrl = '/static/images/' + str(sui_num) + '.png'
    return single.save()

设置路由

path(r'load_music', views.load_music, name='load_music'),

模板

加载layui css
<link rel="stylesheet" type="text/css" media="screen" 
href="{% static 'css/layui.css' %}">
加载layui js
<script src="{% static 'js/layui.js' %}"></script>
增加功能列表

在播放器主体中模糊背景下增加功能列表

<!-- 模糊背景 -->
<div class="music-player__blur" style="background-image: url("/static/images/c.jpg");"></div>
<!-- 导入本地歌曲 -->
<div class="music-find_list layui-btn-container">
    <span id="btn_list" class="layui-icon layui-icon-app demo1"></span>
</div>
功能列表脚本实现
<script>
layui.use(['dropdown', 'util', 'layer', 'table'], function(){
      var dropdown = layui.dropdown
      ,util = layui.util
      ,layer = layui.layer
      ,$ = layui.jquery;

      //初演示
      dropdown.render({
        elem: '.demo1'
        ,data: [{
        title: '加载歌曲'
        ,id: 100
      }]
      ,click: function(obj){
        loadMusic()
        //layer.tips('点击了:'+ obj.title, this.elem, {tips: [1, '#5FB878']})
      }
    });

    // 请求接口 导入歌曲到数据库
    function loadMusic() {
        $.ajax({
                type: 'GET',
                url: "/load_music",
                data: {id:1},
                success: function (data) {
               layer.alert(data, {icon: 1})
                }.bind(this),
                error: function (e) {
                    console.log("ERROR : ", e);
               }
        });
    }
  })
</script>

效果

Django实现简单的音乐播放器 3,# Django项目,django,python,后端

最终效果

启动服务器后通过浏览器访问,歌曲可播放并可切换相应歌曲;

还可以通过功能列表加载本地歌曲。

Django实现简单的音乐播放器 3,# Django项目,django,python,后端

项目源码:

链接:https://pan.baidu.com/s/1hdRFshi6aoEmxbsuRWFl9w
提取码:vr8t

总结

本来打算做一个较为复杂的web 音乐播放网站,因为最近工作比较忙,于是先做一个简单的播放器练练手。主要实现一个简单的音乐播放器功能,因为时间关系,所以直接找现成的音乐播放器模板通过django改活,这样效果也比较好看一点。音乐播放器的基本功能都已实现。文章来源地址https://www.toymoban.com/news/detail-531436.html

到了这里,关于Django实现简单的音乐播放器 3的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python功能制作之简单的音乐播放器

    pip install PyQt5 双击列表歌曲即播放。 按住下面的暂停和播放【需要图标】【空格也可以】  

    2024年02月11日
    浏览(31)
  • Python轻松实现音乐播放器

    来个新玩意就是教大家如何用python来制作一个音乐播放器 希望对大家有所帮助哈哈 你们也可以尝试自己做做 先给你们展示展示最简单的,只需要九行代码 知识点和所需模块 python基础知识 requests库 time pygame tkinter 线程 环境 windows pycharm 2021.2 python 3.8 ok,直接说上完整代码 !

    2024年02月11日
    浏览(49)
  • Qt实现本地音乐播放器

     mainwindow.h mainwindow.cpp qss: 源码:Qt与学习通页面: 记录与Qt相关的代码 - Gitee.com

    2024年02月12日
    浏览(43)
  • 学习笔记(1)——粤嵌gec6818实现电子相册,音乐播放器,视频播放器。

    (1)设计一个初始界面,并且设置电子相册,音乐播放器,视频播放器三个触摸按键。 (2)电子相册——能够实现相册的幻灯片功能,实现相册左右滑动切换相片。 (3)音乐播放器实现——切歌,播放和暂停功能。 (4)视频播放器实现——播放、暂停、音量大小、快进倒

    2024年02月11日
    浏览(50)
  • Android Studio 实现音乐播放器

    🍅 文章末尾有获取完整项目源码方式 🍅         Android初学者开发第一个完整的实例项目应该就属《音乐播放器》了,项目包含SQLlit数据库的使用、listview、Fragment、等。话不多说先上成品: Android Studio 音乐播放器 图片效果展示: 1.启动页效果 2.登录页效果 3.注册页效果

    2024年02月06日
    浏览(45)
  • tkinter+爬虫+pygame实现音乐播放器

    本文将涉及爬虫(数据的获取),pygame(音乐播放器),tkinter(界面显示),将他们汇聚到一起制造一个音乐播放器,欢迎大家的订阅。 pip install requests pip install parsel pip install lxpy pip install pygame

    2024年02月20日
    浏览(35)
  • Python实现多功能音乐播放器

    就是用Python做一个简易的音乐播放器,废话不多说,咱们直接开干 当然,今天做这个肯定不是最简单的,最简单的音乐播放器,9行代码足以 知识点和所需模块 1.python基础知识 2.requests库 3.time 4.pygame 5.tkinter 6.线程 环境 windows pycharm 2021.2 python 3.8 简易版的 还有个半成品的,目

    2024年02月11日
    浏览(39)
  • PyQt5实现简易音乐播放器

    环境 vscode python 3.10.0 PyQt5 5.15.4 功能目标 能够读取本地的音乐文件,并实现播放的开关、曲目的切换和音量的加减 具体实现 新建一个文件夹,在文件夹下再新建一个文件夹,命名为music,将歌曲放入其中。在vscode中打开该文件夹。 在QtDesigner中搭建出UI界面,并使用pyuic工具转

    2024年02月13日
    浏览(34)
  • 微信小程序实现音乐播放器(1)

    代码涉及的主要文件有: app.json app.wxss pages/music/music.json pages/music/music.wxml pages/music/music.wxss pages/music/music.js 另外,你可能需要的图片资源,在这里! BackgroundAudioManager实现背景音乐 imzusheng / netease-music-uniapp

    2024年02月09日
    浏览(41)
  • stm32 KeiluVision:实现音乐播放器

    鱼弦:CSDN内容合伙人、CSDN新星导师、全栈领域优质创作者 、51CTO(Top红人+专家博主) 、github开源爱好者(go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen) 音乐播放器项目 功能:插上U盘能够播放音乐(两首就行)按第一个键能够切换音乐,按2-8个键使发出不同音调

    2024年03月08日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包