Django实现音乐网站 (22)

news2024/9/20 18:44:28

使用Python Django框架做一个音乐网站，

本篇音乐播放器功能完善：顺序播放、设置播放数、歌词滚动等功能。

目录

顺序播放

设置顺序播放

单曲播放数

添加路由

视图处理

模板处理

歌词滚动

视图内容返回修改

样式设置

模板内容

歌词滚动脚本

歌词滚动判断

模板设置

播放器脚本修改

设置音乐

播放器初始化修改

歌曲详情修改

借鉴博客

项目源码

项目目录结构

说明

下载地址

总结

顺序播放

当播放完一首歌曲后，继续播放下一首，循环播放列表中的单曲。

实践发现使用audio媒体的loop属性只是对当前的单曲的循环播放。

需自定义实现循环播放功能。

设置顺序播放

通过监听播放器结束事件，设置触发播放下一曲。

脚本内容如下：

$player.addEventListener('ended', function () {
    if (currentIndex < (music_list.length - 1)) {
        currentIndex += 1;
    } else {
        // 切换为第一首
        currentIndex = 0;
    }
    // 设置播放标识为暂停
    $dian.className = 'glyphicon glyphicon-play';
    // 播放时间
    $('.playTimeSpan').text('00:00');
    // 设置歌曲进度归零
    $('.music-progress').css('width', '1px');
    // 设置歌曲
    setMusic();

    // 同步播放列表状态
    var nowDiv = $("#play_list").children('.active_cur');
    nowDiv.find('.playing').hide();
    nowDiv.removeClass('active_cur');
    var newDiv = $("#music_num"+(currentIndex+1));
    newDiv.addClass('active_cur');
    newDiv.find('.playing').show();

    // 设置播放器 播放状态
    var music_dian = $('#music_dian');
    if (music_dian.attr('class') == 'glyphicon glyphicon-play') {
        music_dian.attr('class', 'glyphicon glyphicon-pause');
    }
    $player.play();
});

单曲播放数

在歌曲播放时，增加歌曲播放数功能；在排行榜中需要播放数进行排序。

添加路由

# 增加播放数
path('add_play_num', views.add_play_num, name='add_play_num'),

视图处理

通过模板传递的单曲id，查询单曲记录；

如果存在：即在原来基础上增加1；

最后返回状态并做json处理。

内容如下：

def add_play_num(request):
    """ 增加单曲播放量 """

    id = request.GET.get('id')
    info = Singe.objects.filter(pk=id).first()

    if info:
        info.playnum += 1
        info.save()

    return JsonResponse({'status': 1, 'msg': '操作成功！'})

模板处理

对audio媒体监听播放事件时，获取当前播放歌曲的单曲id，传递给视图进行处理。

内容如下：

// 监听播放器 播放时触发
$player.addEventListener('play', function () {
    // 处理同步播放列表 播放状态
    $("#music_num"+currentIndex).removeClass('active_cur');
    $("#music_num"+currentIndex).find('.playing').hide();
    $("#music_num"+(currentIndex+1)).addClass('active_cur');
    $("#music_num"+(currentIndex+1)).find('.playing').show();
    // 增加单曲播放数
    $. get('/add_play_num', {'id':music_list[currentIndex].song_id}, function (msg) {
        if(msg.status == 1) {
            layer.msg(msg.msg, {icon: 6});
        } else {
            layer.msg(msg.msg, {icon: 5});
        }
    });
});

效果：

歌词滚动

在歌曲详情中播放音乐时，歌词与播放进度同步滚动显示。

视图内容返回修改

原来的视图中歌词处理为列表了，现在只需要通过join函数连接为文本即可。

内容如下：

def album_song(request):
    """ 专辑中单曲详情 """

    sid = request.GET.get('sid')
    song_info = Singe.objects.filter(id=sid).first()
    # 反向查询专辑
    info = song_info.album_set.first()
    # 歌词处理
    lyrics = []
    if song_info:
        lyrics = read_lyric(song_info.lyric)
    lyric_text = "".join(lyrics)

    return render(request, 'album/song.html', locals())


def read_lyric(path):
    """ 读取歌词文件 """

    f = open(os.path.join(settings.MEDIA_ROOT, str(path)), 'r', encoding='utf-8')
    lines = []
    for line in f:
        lines.append(line)
    f.close()
    return lines

样式设置

设置歌词滚动功能所需的样式。

内容如下：

.bg {
    /* 歌词调整区 */
    width: 100%;
    /* 歌词显示盒子宽 */
    height: 200px;
    /* 歌词显示盒子高度，需要多显示几行歌词相应调大即可 */
    /* background-color:#333; */
    /* 歌词背景颜色 */
    margin: 15px auto;
    color: darkgrey;
    /* 歌词默认颜色,灰色 */
    font-size: 15px; /* 歌词字体默认大小 */
    overflow: hidden;
    position: relative;
    font-family: "宋体"; /*字体可以随便换*/
}

.bg ul {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
}

.bg ul li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
}

.bg ul li.active { /* 歌词高亮滚动区 */
    color: #ffe12c;
    font-size: 18px;
}

模板内容

把歌词文本放入一个隐藏输入框中及设定歌词渲染的元素。

内容如下：

<input type="hidden" id="text" value="{{lyric_text}}">
<div class="lyric lyricAll bg"></div>

歌词滚动脚本

歌词滚动效果，用的网上的文章内容做的，能够实现滚动；

就是有两个问题：

1.播放进度与显示进度不符。

2.滚动的速度太快了，歌词显示选中的都已经卷过了。

之后有时间就调试一下，这两个问题归根其实是一个问题，播放进度与显示进度不符。

分割歌词、歌曲进度计算、设置卷动速度都调了一遍，发现没问题。

最后发现设置元素这里有问题，给ul、li分别设置了id、class完美实现歌词滚动。

脚本内容如下：

$(function() {
    function parseLyric(text) {
        //按行分割歌词
        let lyricArr = text.split('\n');
        let result = []; //新建一个数组存放最后结果
        // 遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组
        for (i = 0; i < lyricArr.length; i++) {
            let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间
            let lineLyric = "";
            if (lyricArr[i].split(playTimeArr).length > 0) {
                lineLyric = lyricArr[i].split(playTimeArr);
            }

            if (playTimeArr != null) {
                for (let j = 0; j < playTimeArr.length; j++) {
                    let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");
                    // 数组填充
                    result.push({
                        time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),
                        content: String(lineLyric).substr(1)
                    });
                }
            }
        }
        return result;
    }

    // 这里请按照格式放入相应歌词--开始
    let text = $('#text').val();

    // 这里请按照格式放入相应歌词--结束
    let audio = document.querySelector('audio');
    // 执行lyc解析
    let result = parseLyric(text);

    // 把生成的数据显示到界面上去
    let $ul = $("<ul id='ly'></ul>");
    for (let i = 0; i < result.length; i++) {
        let $li = $("<li class='ld'></li>").text(result[i].content);
        $ul.append($li);
    }
    $(".bg").append($ul);
    // 当前行歌词
    let lineNo = 0;
    // 当播放6行后开始滚动歌词
    let preLine = 1;
    // 每次滚动的距离
    let lineHeight = -30;

    // 滚动播放 歌词高亮 增加类名active
    function highLight() {
        let $li = $(".ld");
        $li.eq(lineNo).addClass("active").siblings().removeClass("active");
        if (lineNo > preLine) {
            $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });
        }
    }

    highLight();

    // 播放的时候不断渲染
    audio.addEventListener("timeupdate", function() {
        if (lineNo == result.length) return;

        if ($(".ld").eq(0).hasClass("active")) {
            $("#ly").css("top", "0");
        }
        lineNo = getLineNo(audio.currentTime);
        highLight();
        lineNo++;
    });

    // 当快进或者倒退的时候，找到最近的后面那个result[i].time
    function getLineNo(currentTime) {
        if (currentTime >= parseFloat(result[lineNo].time)) {
            // 快进
            for (let i = result.length - 1; i >= lineNo; i--) {
                if (currentTime >= parseFloat(result[i].time)) {
                    return i;
                }
            }
        } else {
            // 后退
            for (let i = 0; i <= lineNo; i++) {
                if (currentTime <= parseFloat(result[i].time)) {
                    return i - 1;
                }
            }
        }
    }

    // 播放结束自动回到开头
    audio.addEventListener("ended", function() {
        lineNo = 0;
        highLight();
        audio.play();
        $("#ly").css("top", "0");
    });
});

效果：

歌词滚动判断

增加歌词滚动判断是否为播放当前音乐；因为歌词滚动功能在歌曲详情实现的，如果不加判断，在播放歌曲时，查看另外一首歌曲的详情也会滚动。

模板设置

在设置音乐播放的盒子中，增加一个隐藏输入框，

用来设置当前播放音乐的id，用以歌词滚动判断。

内容如下：

<div class="play_left">
    <div class="music_title">
        <span class="music_name">七里香 – 周杰伦</span>
        <span class="totalTimeSpan">/04:59</span>
        <span class="playTimeSpan">00:00</span>
        <input type="hidden" id="now_music" value="0">
    </div>
    <div class="music_rate">
        <div class="music-progress"></div>
    </div>
</div>

播放器脚本修改

设置音乐

在音乐播放器play.js中设置音乐的方法中，增加设置隐藏输入框当前音乐id.

内容如下：

// 设置播放器歌曲信息
function setMusic() {
    // 设定歌曲封面
    $('#music_img').attr('src', music_list[currentIndex].cover);
    // 设定歌曲名称和歌手
    $('.music_name').text(music_list[currentIndex].song_name +
        ' - ' + music_list[currentIndex].singer);
    // 设定歌曲路径
    $player.src = music_list[currentIndex].song_path;

    // 设置当前播放音乐id
   $('.now_music').val(music_list[currentIndex].song_id);
}

播放器初始化修改

需要在播放器初始化方法中也增加设置。

内容如下：

$('#now_music').val(music_list[currentIndex].song_id);

歌曲详情修改

在歌曲详情歌词滚动脚本中增加判断是否为当前播放音乐。

原来脚本内容的基础上，在歌词渲染完毕之后，

增加三行内容判断是否为播放当前音乐，

如果不是，则终止向下执行。

内容如下：

// 把生成的数据显示到界面上去
let $ul = $("<ul id='ly'></ul>");
for (let i = 0; i < result.length; i++) {
    let $li = $("<li class='ld'></li>").text(result[i].content);
    $ul.append($li);
}
$(".bg").append($ul);

// 判断播放音乐是否为当前页音乐
let now_music = $('#now_music').val();
let page_music = "{{song_info.id}}";
if(now_music != page_music) return;

借鉴博客

html页面制作滚动歌词_网页版动态歌词-CSDN博客

项目源码

如果觉得通过文章讲解不直观或者还是有些不懂的，

可以下载源码再针对某方面内容仔细查看。

项目目录结构

说明

Media：前端和后台上传文件媒体目录

myMusic：项目工程目录

Player：项目子应用目录

Static：项目静态文件存储目录

Templates：应用模板路径

Mymusic.sql 音乐网站数据库表文件

下载地址

链接：百度网盘 请输入提取码

提取码：13lq

总结

本篇还是播放器功能完善，主要实现功能为：

播放列表顺序播放；添加单曲播放数；播放时歌词滚动等功能实现。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1123061.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

为什么这些网站都在使用CFCA证书

为什么这些网站都在使用CFCA证书

在今天的数字时代&#xff0c;保障数据的安全至关重要&#xff0c;尤其是对于金融机构、政府部门和大型企业等组织而言。证书颁发机构在这一领域扮演着关键的角色&#xff0c;而CFCA&#xff08;中国金融认证中心&#xff09;证书已经脱颖而出&#xff0c;展现了其与其他证书的…
阅读更多...
提取作者用户名，帖子内容，回复时间

提取作者用户名，帖子内容，回复时间

import re import csv# 打开名为a1.txt的文件&#xff0c;并以只读模式(r)读取其内容。这里使用了UTF-8编码。 with open(网页源码a1.txt, r, encodingUTF-8) as f:# 读取文件的所有内容并赋值给变量source source f.read()# 使用正则表达式查找所有匹配region_header clea…
阅读更多...
YOLOv8改进实战 | 更换损失函数之MPDIOU（2023最新IOU）篇

YOLOv8改进实战 | 更换损失函数之MPDIOU（2023最新IOU）篇

前言 YOLOv8官方默认损失函数采用的是CIoU。本章节主要介绍如何将MPDIoU损失函数应用于目标检测YOLOv8模型。 目录 一、MPDIoU二、代码实现添加损失函数更换损失函数一、MPDIoU 论文链接：MPDIoU: A Loss for Efficient and Accurate Bounding Box Regression MPDIoU是一种基于…
阅读更多...
【Tensorflow 2.12 智能商城商品推荐系统】

【Tensorflow 2.12 智能商城商品推荐系统】

Tensorflow 2.12 智能商城商品推荐系统 前言架构数据召回排序部署调用结尾 前言 基于 Tensorflow 2.12 搭建一个简单的智能商城商品推荐系统demo~ 主要包含6个部分&#xff0c;首先是简单介绍系统架构&#xff0c;接着是训练数据收集、处理&#xff0c;然后是召回模型、排序模型…
阅读更多...
Vue3.3指北(一)

Vue3.3指北(一)

Vue3.3指北 1、Vue32、Vue3安装3、Vue指令3.1、配置准备1.1.1、WebStrom配置模板1.1.2、配置devtools1.1.3、Vue3指令概览 3.2、内容渲染指令3.2.1、mustache语法3.2.2、v-once1.3.2、v-text1.3.3、v-html1.3.4、v-pre1.3.5、v-cloak 3.3、属性绑定指令3.3.1、v-bind1、v-bind绑…
阅读更多...
如何查看SSL证书是OV还是DV?

如何查看SSL证书是OV还是DV?

网站的安全性与信任度对于用户来说至关重要&#xff0c;它决定着用户是否继续浏览以及是否与您开展业务。SSL证书则是确保网站能够通过HTTPS加密安全传输数据的基础&#xff0c;可确保网站的安全可信。部署了SSL证书的网站打开后&#xff0c;在浏览器地址栏处会有安全锁标志。而…
阅读更多...
02.MySQL函数及约束、多表笔记

02.MySQL函数及约束、多表笔记

函数 函数是指一段可以直接被另一段程序调用的程序或代码。 字符串函数 MySQL中内置了很多字符串函数&#xff0c;常用的几个如下&#xff1a; 函数功能CONCAT(S1,S2,…Sn)字符串拼接&#xff0c;将S1,S2,.Sn拼接成一个字符串LOWER(str)将字符串str全部转为小写UPPER(str)将…
阅读更多...
真正的办公神器-ONLYOFFICE你了解多少？

真正的办公神器-ONLYOFFICE你了解多少？

陈老老老板&#x1f934; &#x1f9d9;‍♂️本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f9d9;‍♂️本文简述&#xff1a;最近在进行办公软件的调研工作&#xff0c;发现一个开源、…
阅读更多...
Merge Joins（PostgreSQL 14 Internals翻译版）

Merge Joins（PostgreSQL 14 Internals翻译版）

合并连接处理按连接键排序的数据集&#xff0c;并返回以类似方式排序的结果。输入集可以在索引扫描后预先排序;否则&#xff0c;执行者必须在实际合并开始之前对它们进行排序。 归并排序集 让我们看一个合并连接的例子;它在执行计划中由Merge Join节点表示&#xff1a; 优化器…
阅读更多...
效率提升一键完成房产小程序源码揭秘高效业务流程优化

效率提升一键完成房产小程序源码揭秘高效业务流程优化

在当今快节奏的房产市场中&#xff0c;提升业务流程的效率对于房地产行业从业者来说至关重要。而房产小程序源码作为一种全新的技术解决方案&#xff0c;为行业带来了前所未有的便利和效益。本文将为您揭秘房产小程序源码的重要性以及如何利用该技术优化业务流程&#xff0c;实…
阅读更多...
双态IT乌镇用户大会——数据中心业务连续性国标专题研讨会成功举办

双态IT乌镇用户大会——数据中心业务连续性国标专题研讨会成功举办

2023年10月13日-15日&#xff0c;由ITSS分会、证券基金行业信息技术应用创新联盟指导&#xff0c;ITSS数据中心运营管理组&#xff08;DCMG&#xff09;、双态IT论坛、智能运维国标工作组主办&#xff0c;ITSS媒体组、AI范儿协办的“2023第六届双态IT乌镇用户大会”于浙江乌镇召…
阅读更多...
内衣迷你洗衣机什么牌子好？迷你洗衣机热销第一名

内衣迷你洗衣机什么牌子好？迷你洗衣机热销第一名

随着人们的生活水平的提升&#xff0c;越来越多小伙伴来开始追求更高的生活水平&#xff0c;一些智能化的小家电就被发明出来&#xff0c;而且内衣洗衣机是其中一个。现在通过内衣裤感染到细菌真的是越来越多&#xff0c;所以我们对内衣裤的清洗频次会高于普通衣服&#xff0c;…
阅读更多...
React之render

React之render

一、原理 首先&#xff0c;render函数在react中有两种形式&#xff1a; 在类组件中&#xff0c;指的是render方法&#xff1a; class Foo extends React.Component {render() {return <h1> Foo </h1>;} }在函数组件中&#xff0c;指的是函数组件本身&#xff1a…
阅读更多...
Ethernet Protocol

Ethernet Protocol

以太网协议说明 1 以太网子层架构 1）MAC and MAC CONTROL Sublayer MAC 负责以太网数据格式中所述的以太网成帧协议以及这些帧的错误检测。MAC 独立于并可以连接到任何类型的物理层设备。这提供了 MAC 子层的实时流控制操作。 MAC CONTROL 和 MAC 子层均由内核在所有操作模式…
阅读更多...
VScode连接的服务器上使用jupyter显示请选择内核源

VScode连接的服务器上使用jupyter显示请选择内核源

问题复现 我实在VScode上用ssh-remote连接的服务器&#xff0c;想用.ipynb文件上写东西&#xff0c;结果窗口上方弹出一个输入框&#xff0c;“请键入以选择内核”&#xff1b; 在扩展里找到jupyter更新一下 之前左边的图标是灰色的&#xff0c;后来我下下载了新的版本&#…
阅读更多...
Spring Cloud Sleuth介绍以及简单示例

Spring Cloud Sleuth介绍以及简单示例

文章目录 什么是Spring Cloud SleuthSpring Cloud Sleuth的底层使用和实现原理如何使用Spring Cloud Sleuth添加依赖添加配置 注意事项Spring Cloud Sleuth的高级用法采样率设置日志格式设置自定义Trace和Span生成器配置Span收集器 简单实现controller层启动类配置类自定义逻辑…
阅读更多...
无氢氟蚀刻剂中钛选择性湿蚀刻铜的研究

无氢氟蚀刻剂中钛选择性湿蚀刻铜的研究

引言 众所周知&#xff0c;微尺度和纳米尺度的地形结构对真核细胞和原核细胞的行为都有显著的影响。例如&#xff0c;具有特殊尺寸的纳米线、纳米柱、纳米管已被证明具有抗菌性能。开发这种结构提供了一种无药物的方法来对抗感染&#xff0c;这被认为是一种替代释放抗菌剂的常…
阅读更多...
contenteditable实现文本内容确认提示

contenteditable实现文本内容确认提示

功能需求&#xff1a; 列表进行批量查询&#xff0c;需要对输入的值做提交校验&#xff0c;分三种情况&#xff1a; 若部分字符串有误&#xff0c;部分字符串需要变更字体颜色做提示&#xff0c;再次点击确认则对部分正确数据执行批量查询 若全部数据有误则变更字体颜色做提示&…
阅读更多...
基于OpenCV批量分片高像素影像

基于OpenCV批量分片高像素影像

基于OpenCV批量分片高像素影像 为了更加精确的诊断和治疗&#xff0c;医疗影像往往是大像素&#xff08;1920x1080&#xff09;或超大像素图像&#xff08;4k图像4096x2160&#xff09;。这类图像的尺寸与深度学习实验数据常见尺寸&#xff08;227x227&#xff0c;或32x32&…
阅读更多...
Inbound marketing | LTD入站营销是对Hubspot集客营销的升级

Inbound marketing | LTD入站营销是对Hubspot集客营销的升级

你如何理解Inbound marketing&#xff1f; 你如何理解Inbound marketing。 集客营销抑或是入站营销。 2006年&#xff0c;MIT的在校学生BrianHalligan和DharmeshShah&#xff08;hubspot的创始人&#xff09;首次提出Inbound marketing&#xff0c;有别于推广式营销的一种全…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023