• Django实现音乐网站 ⒆

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

    本篇主要为排行榜功能及音乐播放器部分功能实现。

    目录

    推荐排行榜优化

    设置歌手、单曲跳转链接

    排行榜列表渲染优化

    视图修改如下：

    模板修改如下：

    单曲详情修改

    排行榜列表

    设置路由

    视图处理

    模板渲染

    设置跳转入口

    播放器功能开发

    设置路由

    模板页面

    脚本渲染

    列表渲染和播放器实现

    音乐播放器列表展示关闭

    总结

    推荐排行榜优化

    设置歌手、单曲跳转链接

    因为歌手、单曲功能页面已开发，现在终于可以设置跳转链接。

    内容如下：

    1. <div class="top_info">
    2.     <p class="song_name"><a href="{% url 'player:album_song' %}?sid={{item.id}}">{{ item.name }}a>p>
    3.     <p class="singler"><a href="{% url 'player:singer_detail' jitem.singler.id %}">{{ item.singler.name }}a>p>
    4. div>

     

    排行榜列表渲染优化

    之前排行榜是通过视图多个集合变量分别进行渲染，在模板页面要写五个排行版模块，分别进行渲染对应的排行榜，经过尝试后整理到一个总排行榜列表集。

    视图修改如下：
    1. def index(request):
    2.     """ 显示首页 """
    3.  
    4.     # 获取首页轮播图
    5.     carousels = Carousel.objects.all()
    6.  
    7.     # 推荐歌单 选播放量最多的五个
    8.     songsheets = SongSheet.objects.order_by('-playnum').all()[0:5]
    9.  
    10.     # 推荐排行榜
    11.     rank_alls = [
    12.         # 热歌榜 取播放量最多的五个
    13.         Singe.objects.order_by('-playnum').all()[0:5],
    14.         # 新歌榜 取最新的五个
    15.         Singe.objects.order_by('-id').all()[0:5],
    16.         # 飙升榜
    17.         Singe.objects.order_by('id').all()[0:5],
    18.         # 欧美榜
    19.         Singe.objects.order_by('-id').all()[0:5],
    20.         # 日韩榜
    21.         Singe.objects.order_by('id').all()[0:5]
    22.     ]
    23.  
    24.     # 推荐歌手 取单曲最多的六个
    25.     singlers = Singler.objects.order_by('-singe_num').all()[0:6]
    26.  
    27.     return render(request, 'index/index.html', locals())

    模板修改如下：

    两套循环嵌套，外循环渲染父盒子，内循环展示排行榜中列表内容；

    通过判断forloop.couter来调用相应排行榜背景图。

    1. <div class="recommend_rank">
    2.     <div class="title">
    3.         <div class="name">推荐排行榜div>
    4.         <ul>
    5.             <li><a href="#">更多>a>li>
    6.         ul>
    7.     div>
    8.     <div class="list">
    9.         {% for rankitem in rank_alls %}
    10.             <div class="bank">
    11.                 <div class="bank_top">
    12.                     <div class="img">
    13.                         <img class="img_tip" src="{% static 'images/' %}b{{forloop.counter}}.png" alt="">
    14.                     div>
    15.                     <img class="img_bg" src="{% static 'images/' %}b{{forloop.counter}}_{{forloop.counter}}.jpg" alt="">
    16.                 div>
    17.                 <ul class="bank_list">
    18.                     {% for hot in rankitem %}
    19.                         <li>
    20.                             {% if forloop.counter == 1 %}
    21.                                 <div class="top_img top1">div>
    22.                             {% elif forloop.counter == 2 %}
    23.                                 <div class="top_img top2">div>
    24.                             {% elif forloop.counter == 3 %}
    25.                                 <div class="top_img top3">div>
    26.                             {% else %}
    27.                                 <div class="top_index">{{forloop.counter}}div>
    28.                             {% endif %}
    29.                             <div class="top_info">
    30.                                 <p class="song_name">
    31.                                     <a href="{% url 'player:album_song' %}?sid={{hot.id}}">{{ hot.name }}a>
    32.                                 p>
    33.                                 <p class="singler">
    34.                                     <a href="{% url 'player:singer_detail' hot.singler.id %}">{{ hot.singler.name }}a>
    35.                                 p>
    36.                             div>
    37.                         li>
    38.                     {% endfor %}
    39.                 ul>
    40.             div>
    41.         {% endfor %}
    42.     div>
    43. div>

    单曲详情修改

    因为之前单曲详情视图处理为查询相应专辑和单曲信息，

    需要传递两个参数：即专辑id和单曲id。

    但是通过排行榜跳转单曲详情，没有专辑id，故需要修改原来的处理。

    通过单曲反向查询所属专辑信息。

    内容如下：

    1. def album_song(request):
    2.     """ 专辑中单曲详情 """
    3.  
    4.     sid = request.GET.get('sid')
    5.     song_info = Singe.objects.filter(id=sid).first()
    6.     # 反向查询专辑
    7.     info = song_info.album_set.first()
    8.     # 歌词处理
    9.     lyrics = []
    10.     if song_info:
    11.         lyrics = read_lyric(song_info.lyric)
    12.  
    13.     return render(request, 'album/song.html', locals())

    排行榜列表

    设置路由

    在子应用文件夹中urls.py中新增一条记录。

    1. # 排行榜
    2. path('rank', views.rank, name='rank'),

    视图处理

    榜单列表需要展示各个排行榜所有一定时间段中上榜单曲列表；

    因为前期单曲没有与类型表关联，目前就只能做一个类似的功能。

    下方代码中处理了分页查询；通过id来区别类型进行排序；

    设置了榜单的名称，更新时间是取单曲列表中时间最晚的一个时间。

    1. def rank(request):
    2.     """ 排行榜 """
    3.     
    4.     id = int(request.GET.get('id', 1))
    5.     page = int(request.GET.get('page', 1))
    6.  
    7.     singe_db = Singe.objects
    8.     if id == 1:
    9.         song_list = singe_db.order_by('-id').all()
    10.         rank_name = '新歌榜'
    11.     elif id == 2:
    12.         song_list = singe_db.order_by('-playnum').all()
    13.         rank_name = '热歌榜'
    14.     elif id == 3:
    15.         song_list = singe_db.order_by('playnum').all()
    16.         rank_name = '飙升榜'
    17.     elif id == 4:
    18.         song_list = singe_db.order_by('-id').all()
    19.         rank_name = '抖音歌曲榜'
    20.     elif id == 5:
    21.         song_list = singe_db.order_by('id').all()
    22.         rank_name = '万物DJ榜'
    23.     else:
    24.         song_list = singe_db.order_by('-playnum').all()
    25.         rank_name = '会员畅听榜'
    26.  
    27.     # 实例化Paginator
    28.     page_num = 20
    29.     paginator = Paginator(song_list, page_num)
    30.  
    31.     try:
    32.         res = paginator.page(page)
    33.     except PageNotAnInteger:
    34.         res = paginator.page(1)
    35.     except EmptyPage:
    36.         res = paginator.page(paginator.num_pages)
    37.     list_num = len(res)
    38.  
    39.     # 榜单更新时间
    40.     updatetime = date.today()
    41.     for item in song_list:
    42.         if updatetime.ctime() < item.updatetime.ctime():
    43.             updatetime = item.updatetime
    44.  
    45.     return render(request, 'rank/index.html', locals())

    模板渲染

    在templates文件夹下创建rank文件夹，并在其中创建index.html文件。

    其他渲染都大同小异，主要有一点新的东西，因为榜单数据比较多，在第一页时候有个前三名标识，需要区别处理第二页之后的序列号和相应标识处理，这里使用了模板中的过滤器。

    内容如下：

    1. {% extends 'common/base.html' %}
    2. {% load static %}
    3.  
    4. {% block title %}我的音乐{% endblock title %}
    5.  
    6. {% block content %}
    7. <link rel="stylesheet" href="{% static 'css/rank.css' %}">
    8.  
    10. <div class="header">
    11.     <img src="{% static 'images/logo.png' %}" class="logo" alt="">
    12.     <ul>
    13.         <li><a href="{% url 'player:index' %}">推荐a>li>
    14.         <li><a href="javascript:void(0)" class="selected">排行榜a>li>
    15.         <li><a href="{% url 'player:singer' 1 '#' %}">歌手a>li>
    16.         <li><a href="{% url 'player:songsheet' %}">歌单a>li>
    17.     ul>
    18. div>
    20. <div class="main_con">
    21.     <div class="con_l">
    22.         <div class="con">
    23.             <div class="tabs flex_c">
    24.                 <span class="active">官方span>
    25.                 <span class="">特色span>
    26.                 <span class="">场景span>
    27.             div>
    28.             <ul class="tab_con">
    29.                 <li class="flex_c active">
    30.                     <img alt="" class="cover" data-src="{% static 'images/rank_list_1.png' %}" src="{% static 'images/rank_list_1.png' %}" lazy="loaded">
    31.                     <div class="item_info">
    32.                         <p class="name"><a href="{% url 'player:rank' %}?id=1">新歌榜a>p>
    33.                         <p class="time">今日更新p>
    34.                     div>
    35.                 li>
    36.                 <li class="flex_c active">
    37.                     <img alt="" class="cover" data-src="{% static 'images/rank_list_2.png' %}" src="{% static 'images/rank_list_2.png' %}" lazy="loaded">
    38.                     <div class="item_info">
    39.                         <p class="name"><a href="{% url 'player:rank' %}?id=2">热歌榜a>p>
    40.                         <p class="time">今日更新p>
    41.                     div>
    42.                 li>
    43.                 <li class="flex_c active">
    44.                     <img alt="" class="cover" data-src="{% static 'images/rank_list_3.png' %}" src="{% static 'images/rank_list_3.png' %}" lazy="loaded">
    45.                     <div class="item_info"><p class="name"><a href="{% url 'player:rank' %}?id=3">飙升榜a>p>
    46.                         <p class="time">今日更新p>
    47.                     div>
    48.                 li>
    49.                 <li class="flex_c active">
    50.                     <img alt="" class="cover" data-src="{% static 'images/rank_list_4.png' %}" src="{% static 'images/rank_list_4.png' %}" lazy="loaded">
    51.                     <div class="item_info"><p class="name"><a href="{% url 'player:rank' %}?id=4">抖音歌曲榜a>p>
    52.                         <p class="time">今日更新p>
    53.                     div>
    54.                 li>
    55.                 <li class="flex_c active">
    56.                     <img alt="" class="cover" data-src="{% static 'images/rank_list_5.png' %}" src="{% static 'images/rank_list_5.png' %}" lazy="loaded">
    57.                     <div class="item_info"><p class="name"><a href="{% url 'player:rank' %}?id=5">万物DJ榜a>p>
    58.                         <p class="time">今日更新p>
    59.                     div>
    60.                 li>
    61.                 <li class="flex_c active">
    62.                     <img alt="" class="cover" data-src="{% static 'images/rank_list_6.png' %}" src="{% static 'images/rank_list_6.png' %}" lazy="loaded">
    63.                     <div class="item_info"><p class="name"><a href="{% url 'player:rank' %}?id=6">会员畅听榜a>p>
    64.                         <p class="time">今日更新p>
    65.                     div>
    66.                 li>
    67.             ul>
    68.         div>
    69.     div>
    70.     <div class="con_r">
    71.         <div>
    72.             <div><span class="title">{{rank_name}}span> <span class="update_time">更新时间：{{updatetime}}span>div>
    73.             <div class="btns">
    74.                 <button class="play bg_primary">
    75.                     <i class="glyphicon glyphicon-play">i> <span>立即播放span>
    76.                 button>
    77.                 <button><i class="glyphicon glyphicon-plus">i> <span>添加span>
    78.                 button>
    79.                 <button>
    80.                     <i class="glyphicon glyphicon-heart">i> <span>收藏span>
    81.                 button>
    82.             div>
    83.             <div class="list_out">
    84.                 <div class="list_head head_name_rank" style="">
    85.                         <ul class="flex_c">
    86.                             <li class="head_num">序号li>
    87.                             <li class="head_name">歌曲li>
    88.                             <li class="head_artist">歌手li>
    89.                             <li class="head_album">发布时间li>
    90.                             <li class="head_time">时长li>
    91.                         ul>
    92.                     div>
    93.                 <ul class="rank_list">
    94.                         {% for item in res %}
    95.                         <li class="song_item flex_c">
    96.                             <div class="song_rank flex_c">
    97.                                 {% if page == 1 %}
    98.                                     {% if forloop.counter == 1 %}
    99.                                         <div class="rank_num top1">div>
    100.                                     {% elif forloop.counter == 2 %}
    101.                                         <div class="rank_num top2">div>
    102.                                     {% elif forloop.counter == 3 %}
    103.                                         <div class="rank_num top3">div>
    104.                                     {% else %}
    105.                                         <div class="rank_num"><span>{{forloop.counter}}span>div>
    106.                                     {% endif %}
    107.                                 {% else %}
    108.                                     <div class="rank_num"><span>{{forloop.counter|add:page_num}}span>div>
    109.                                 {% endif %}
    110.                                 <div class="status">div>
    111.                             div>
    112.                             <div class="song_name flex_c">
    113.                                 <a title="{{item.name}}" href="{% url 'player:album_song' %}?sid={{item.id}}" class="name">{{item.name}}a>
    114.                             div>
    115.                             <div class="song_artist">
    116.                                 <span title="{{item.singler.name}}">{{item.singler.name}}span>
    117.                             div>
    118.                             <div class="song_album">
    119.                                 <span>{{item.addtime}}span>
    120.                             div>
    121.                             <div class="song_time"><span>{{item.get_song_duration}}span>div>
    122.                             <div class="song_opts flex_c">
    123.                                 <i class="glyphicon glyphicon-plus">i>
    124.                                 <i class="glyphicon glyphicon-play">i>
    125.                                 <i class="glyphicon glyphicon-heart">i>
    126.                             div>
    127.                         li>
    128.                         {% endfor %}
    129.                     ul>
    130.                 {% if list_num < 1 %}
    131.                 
    132.                 <div class="nodata flex_c">
    133.                     <div class="inner">
    134.                         <img src="{% static 'images/nodata.png' %}"
    135.                              alt="" class="nodata_img">
    136.                         <div class="tip"><p>暂无相关数据p>div>
    137.                     div>
    138.                 div>
    139.                 {% endif %}
    140.                 <div class="loading-mask" style="display: none;">
    141.                     <div class="loading-wrap">
    142.                         <div class="load"><span class="side1">span> <span
    143.                                 class="side2">span> <span class="mid">span>
    144.                             <span class="side2">span> <span
    145.                                     class="side1">span>div>
    146.                     div>
    147.                 div>
    148.             div>
    149.             {% if list_num > 0 %}
    150.             
    151.             <div class="page">
    152.                 <i class="li-page glyphicon glyphicon-menu-left notPointer">i>
    153.                 <ul>
    154.                     {% for index in res.paginator.page_range %}
    155.                     {% if res.number == index %}
    156.                     <li><a href="#" class="notCursor currentPage">{{index}}a>li>
    157.                     {% else %}
    158.                     <li><a href="{% url 'player:rank' %}?page={{index}}">{{index}}a>li>
    159.                     {% endif %}
    160.                     {% endfor %}
    161.                 ul>
    162.                 <i class="glyphicon glyphicon-menu-right li-page">i>
    163.             div>
    164.             {% endif %}
    165.         div>
    166.     div>
    167. div>
    168.  
    169. {% endblock content %}

    设置跳转入口

    点击推荐排行榜中更多按钮，进入排行榜列表。

    内容如下：

    1. <div class="title">
    2.     <div class="name">推荐排行榜div>
    3.     <ul>
    4.         <li><a href="{% url 'player:rank' %}">更多>a>li>
    5.     ul>
    6. div>

    播放器功能开发

    其他功能大致算完成了，开始做播放音乐的功能开发。

    播放器设置在网站的底部，采用固定悬浮；

    可以左右切换音乐，设置音量，查看播放音乐列表。

    设置路由

    主要用来获取播放器音乐列表信息。

    1. # 播放器列表
    2. path('play_list', views.play_list, name='play_list'),

    模板页面

    播放器的主要功能采用之前使用html做的播放器，

    直接嵌入到django音乐网站基类模板（templates/common/base.html）的底部。

    内容如下：

    1. <div id="music_all">
    2.     <div class="music_main" style="opacity:1;background:#fff">
    3.         <div class="music_left">
    4.             <img class="music_img" id="music_img" src="{% static 'images/s1.jpg' %}" alt="">
    5.         div>
    6.         <audio id="player">
    7.             <source src="/media/uploads/1691649371/七里香_-_周杰伦.mp3" type="audio/mpeg">
    8.             您的浏览器不支持 audio 元素。
    9.         audio>
    10.         <div class="play_left">
    11.             <div class="music_title">
    12.                 <span class="music_name">七里香 – 周杰伦span>
    13.                 <span class="totalTimeSpan">/04:59span>
    14.                 <span class="playTimeSpan">00:00span>
    15.             div>
    16.             <div class="music_rate">
    17.                 <div class="music-progress">div>
    18.             div>
    19.         div>
    20.         <div class="play_right">
    21.             <i class="glyphicon glyphicon-step-backward" id="music_prev">i>
    22.             <i class="glyphicon glyphicon-play" id="music_dian">i>
    23.             <i class="glyphicon glyphicon-step-forward" id="music_next">i>
    24.         div>
    25.         <div class="music_right">
    26.             <ul>
    27.                 <li><i class="glyphicon glyphicon-th-list" id="setList">i>li>
    28.                 <li><i class="glyphicon glyphicon-volume-up" id="setVolume">i>li>
    29.                 <li>
    30.                     <div class="slider">
    31.                         <input type="range" id="volume" min="0" max="100" value="0">
    32.                     div>
    33.                 li>
    34.             ul>
    35.         div>
    36.     div>
    37.     <div class="songList" style="display:none">
    38.         <div class="list_top flex_c">
    39.             <div id="play_title">div>
    40.             <div class="flex_c">
    41.                 <div class="clear_all"><i class="glyphicon glyphicon-trash">i> <span
    42.                         class="clear_btn">清空列表span>
    43.                 div>
    44.                 <i class="close glyphicon glyphicon-remove">i>div>
    45.         div>
    46.         <div class="list_con">
    47.             <div id="play_list" style="transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    48.             transition-duration: 0ms; transform: translate(0px) scale(1) translateZ(0px);overflow-y: scroll;height:400px;">div>
    49.             <div style="position: absolute; z-index: 9999; width: 7px; bottom: 2px; top: 2px; right: 1px; overflow: hidden;"
    50.                  class="bscroll-vertical-scrollbar">
    51.                 <div style="box-sizing: border-box; position: absolute; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 3px; width: 100%; transition-duration: 0ms; height: 190px; transform: translateY(0px) translateZ(0px); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);"
    52.                      class="bscroll-indicator">div>
    53.             div>
    54.         div>
    55.     div>
    56. div>

    效果：

    脚本渲染

    使用JavaScript来实例化audio的提供的接口方法，并结合后台数据进行渲染和调用audio来实现播放器功能。

    列表渲染和播放器实现

    内容如下：

    1. window.onload = function () {
    2.     // 绑定音频元素
    3.     var $player = document.getElementById('player');
    4.  
    5.     // 绑定播放按钮
    6.     var $dian = document.getElementById('music_dian');
    7.  
    8.     // 设置音频初始属性
    9.     var volume_num = 0.5;
    10.  
    11.     // 当前歌曲索引
    12.     var currentIndex = 0;
    13.  
    14.     // 设置播放列表
    15.     var music_list = [{
    16.         'id': 1,
    17.         'cover': '/static/images/s1.jpg',
    18.         'singer': '周杰伦',
    19.         'song_name': '七里香',
    20.         'song_path': '/media/uploads/1691649371/七里香_-_周杰伦.mp3'
    21.     },];
    22.  
    23.     // 设置播放器音乐列表
    24.     var play_list = document.getElementById('play_list');
    25.  
    26.     var play_title = document.getElementById('play_title');
    27.  
    28.     // 初始化设置
    29.     setInit();
    30.  
    31.     // 绑定音频控制开关
    32.     $dian.onclick = function () {
    33.         if (this.classList == 'glyphicon glyphicon-play') {
    34.             this.className = 'glyphicon glyphicon-pause';
    35.             $player.play();
    36.         } else {
    37.             // layui-icon-pause
    38.             this.className = 'glyphicon glyphicon-play';
    39.             $player.pause();
    40.         }
    41.     };
    42.  
    43.     // 设置播放器初始属性
    44.     function setInit() {
    45.         // 设定音量
    46.         $player.volume = volume_num;
    47.         $('#volume').val(volume_num * 100);
    48.  
    49.         // 通过同步方式获取播放列表信息
    50.         $.ajaxSettings.async = false;
    51.         $.getJSON('/play_list', {}, function (res) {
    52.             // 赋值播放列表
    53.             music_list = res.list;
    54.         });
    55.  
    56.         // 设定歌曲封面
    57.         $('#music_img').attr('src', '/media/' + music_list[0].cover);
    58.  
    59.         // 设定歌曲名称和歌手
    60.         $('.music_name').text(music_list[0].song_name + ' - ' + music_list[0].singer);
    61.  
    62.         // 设定歌曲路径
    63.         $player.src = '/media/' + music_list[0].song_path;
    64.  
    65.         // 设置播放器音乐列表
    66.         set_media_list(music_list)
    67.     }
    68.  
    69.     // 监听播放器播放时间改变事件
    70.     $player.addEventListener('timeupdate', function () {
    71.         // 当前播放时间
    72.         var currentTime = $player.currentTime;
    73.         // 总时间
    74.         var totalTime = $player.duration;
    75.  
    76.         // 当是数字的时候
    77.         if (!isNaN(totalTime)) {
    78.             // 得到播放时间与总时长的比值
    79.             var rate = currentTime / totalTime;
    80.             // 设置时间显示
    81.             // 播放时间
    82.             $('.playTimeSpan').text(musicTime(currentTime));
    83.             // 总时长
    84.             $('.totalTimeSpan').text('/' + musicTime(totalTime));
    85.             // 设置进度条
    86.             $('.music-progress').css('width', rate * 441 + 'px');
    87.         }
    88.     });
    89.  
    90.     // 设置音量
    91.     $('#volume').change(function () {
    92.         volume_num = $(this).val();
    93.         $player.volume = volume_num * 0.01
    94.     });
    95.  
    96.     // 上一首
    97.     $('#music_prev').click(function () {
    98.         if (currentIndex > 0) {
    99.             currentIndex -= 1;
    100.         } else {
    101.             // 切换到最后一首
    102.             currentIndex = music_list.length - 1;
    103.         }
    104.         // 设置播放标识为暂停
    105.         $dian.className = 'glyphicon glyphicon-play';
    106.         // 播放时间
    107.         $('.playTimeSpan').text('00:00');
    108.         // 设置歌曲进度归零
    109.         $('.music-progress').css('width', '1px');
    110.         // 设置歌曲
    111.         setMusic();
    112.     });
    113.  
    114.     // 下一首
    115.     $('#music_next').click(function () {
    116.         if (currentIndex < (music_list.length - 1)) {
    117.             currentIndex += 1;
    118.         } else {
    119.             // 切换为第一首
    120.             currentIndex = 0;
    121.         }
    122.         // 设置播放标识为暂停
    123.         $dian.className = 'glyphicon glyphicon-play';
    124.         // 播放时间
    125.         $('.playTimeSpan').text('00:00');
    126.         // 设置歌曲进度归零
    127.         $('.music-progress').css('width', '1px');
    128.         // 设置歌曲
    129.         setMusic();
    130.     });
    131.  
    132.     // 设置播放器歌曲信息
    133.     function setMusic() {
    134.         // 设定歌曲封面
    135.         $('#music_img').attr('src', '/media/' + music_list[currentIndex].cover);
    136.         // 设定歌曲名称和歌手
    137.         $('.music_name').text(music_list[currentIndex].song_name +
    138.             ' - ' + music_list[currentIndex].singer);
    139.         // 设定歌曲路径
    140.         $player.src = '/media/' + music_list[currentIndex].song_path;
    141.     }
    142.  
    143.     // 歌曲时长（00:00）
    144.     function musicTime(sens) {
    145.         // 分
    146.         var m = parseInt(sens / 60);
    147.         // 秒
    148.         var s = parseInt(sens % 60);
    149.         // 补零
    150.         m = m > 9 ? m : "0" + m;
    151.         s = s > 9 ? s : "0" + s;
    152.         return m + ":" + s;
    153.     }
    154.  
    155.     // 设置音乐播放器列表
    156.     function set_media_list(music_list) {
    157.         var play_html = '';
    158.         for (var i = 0; i < music_list.length; i++) {
    159.             if (i) {
    160.                 play_html += '
      ' +
    161.                     '
      ' + (i + 1) + '' +
    162.                     ';
    163.             } else {
    164.                 play_html += '
      ' +
    165.                     '
      ' + (i + 1) + '' +
    166.                     '';
    167.             }
    168.             play_html += '' +
    169.                 '' +
    170.                 '' +
    171.                 '' +
    172.                 '
      ' +
  • '
    ' +
  • 'id +'" title="' + music_list[i].song_name + '" ' +
  • 'target="_blank">' + music_list[i].song_name + '' +
  • '
    ' +
  • '
    ' +
  • 'singer_id +'" ' +
  • 'class="" title="' + music_list[i].singer + '" target="_blank">' + music_list[i].singer + '' +
  • '
    ' +
  • '
    ' + music_list[i].duration + '
    '     +
  • '
    ' +
  • '  ' +
  • '  ' +
  • '  ' +
  • '  ' +
  • '
    ' +
  • '
    ';
  • }
  • play_title.innerHTML='播放列表 (共'+ music_list.length +'首)';
  • play_list.innerHTML=play_html;
  • console.log(play_title);
  • }
  • };

    • 音乐播放器列表展示关闭

    可通过底部播放器列表icon来打开和关闭播放列表；

    也可以通过播放列表中关闭icon来隐藏播放列表。

    内容如下：

    1. $('#setList').click(function(){
    2.     // 展示关闭音乐播放器列表
    3.     var songList = $('.songList');
    4.     if (songList.css('display') == 'none') {
    5.         songList.show();
    6.     }else{
    7.         songList.hide();
    8.     }
    9. })
    10.  
    11. $('.close').click(function(){
    12.     // 关闭播放列表
    13.     $('.songList').hide();
    14. });

    总结

    本篇主要是推荐页-排行榜功能改为动态数据及播放器功能部分实现，可以播放音乐和左右切换以及查看播放音乐列表。

  • 相关阅读:
    常用百宝箱——日志处理
    Linux下ThinkPHP5实现定时器任务 - 结合crontab
    LeetCode：29. 两数相除
    java 显示c控制台程序窗口,Windows-如何清除C中的控制台屏幕？
    如何封装Dao_java培训
    Java 新手如何使用Spring MVC RestAPI的加密
    95后工程师上班哼小曲？那些愉快上班的打工人，到底怎么做到的？
    Java List 集合取 交集、并集、差集、补集 Java集合取交集、Java集合并集
    使用CMake构建一个简单的C++项目
    多级缓存自用
  • 原文地址：https://blog.csdn.net/json_ligege/article/details/133776371