QQ音乐播放器-jQuery实现

news/2025/1/12 21:57:01/

QQ音乐播放器

案例展示

在这里插入图片描述

案例实现的功能

  1. 静态页面的布局
  2. 歌曲信息的动态显示
  3. 鼠标悬停,功能按钮和文字高亮
  4. 歌曲信息的动态显示
  5. 歌曲播放
  6. 进度条显示和动态移动
  7. 纯净模式的模板设置和歌词写入

案例布局

在这里插入图片描述

歌曲动态加载

其实就是向中-左的ul中动态添加li来实现动态数据显示

在这里插入图片描述

  1. 要想动态加载数据就要现有数据:
    1. 通过$.ajax({})来动态加载数据(注意:加载本地文件有跨域问题,建议打开本地服务器)
  2. 循环期中的数据,动态的创建li添加到ul中
    1. 通过$.each()循环出数据传入到,动态创建函数createInfo()中
  3. createInfo最后的两句是让每个DOM 对象都添加相应的信息,以便click时知道是哪个数据
//加载数据
function info() {$.ajax({url: "./source/musiclist.json",dataType: "json",success: function (data) {player.musicList = datavar $ul = $('.center_list #mCSB_1_container')$.each(data, function (index, value) {var $item = createInfo(index, value)$ul.append($item)})}})}//创建歌曲li信息function createInfo(index, value) {var item = $('<li class="content_common"><div class= "content_check" > <span></span></div><div class="content_number">' + (index + 1) + '</div><div class="content_music">' + value.name + '<div class="content_fuction"><a href="javascript:;" title="播放" class="play_music"></a><a href="javascript:;" title="添加"></a><a href="javascript:;" title="下载"></a><a href="javascript:;" title="分享"></a></div></div><div class="content_singer">' + value.singer + '</div><div class="content_time"> <span>' + value.time + '</span><a href="javascript:;" title="删除" class="deleteLi"></a></div></li >')item.get(0).index = indexitem.get(0).music = valuereturn item}

歌曲信息动态显示

在播放某一首歌时获取其对应DOM元素的信息,动态替换歌曲信息

在这里插入图片描述

在这里插入图片描述

 //对播放按钮绑定事件---事件委托$('.center_list').delegate('.play_music', "click", function () {var $music = $(this).parents('.content_common').get(0).musicvar $index = $(this).parents('.content_common').get(0).index//歌曲信息initInfo($music)//歌词信息lyrics.loadLyrics($music.link_lrc)}) 
//歌曲信息function initInfo(music) {var $song_info_img = $('.song_info .bj>img')var $song_info_name = $('.song_info_name>a')var $song_info_singer = $('.song_info_singer>a')var $song_info_album = $('.song_info_album>a')var $song_info = $('.play_info_top .left')var $song_info_time = $('.play_info_top .right')var $mask_bj = $('.mask_bj')$song_info_img.attr('src', music.cover)$song_info_name.text(music.name)$song_info_singer.text(music.singer)$song_info_album.text(music.album)$song_info.text(music.name + "-" + music.singer)$song_info_time.text('00:00/' + music.time)$mask_bj.css('background', "url(" + music.cover + ")")}

歌曲播放

歌曲播放简单来说就是切换<audio src="">的src属性

  1. 点击那个li获取对应的DOM信息
  2. 获取信息中的播放src地址
  3. 切换src地址
 //对播放按钮绑定事件---事件委托$('.center_list').delegate('.play_music', "click", function () {var $music = $(this).parents('.content_common').get(0).musicvar $index = $(this).parents('.content_common').get(0).index//对象的方法用来动态切换src地址player.playMucis($index, $music)}) //对象中的方法---部分playMucis: function (index, music) {//currentIndex属性用来存上一首播放的索引,判断是否切换src还是暂停歌曲if (index == this.currentIndex) {//同一首歌if (this.item.paused) {this.item.play()} else {this.item.pause()}} else {//不同一首歌this.$item.attr('src', music.link_url)this.item.play()this.currentIndex = index}},

进度条的移动

进度条的移动判定是高亮部分在背景部分所占的多少进行移动

  • 通过现在播放时间和总时间的比例来调节进度条的移动的比例

在这里插入图片描述

//监听播放时间
player.playTime(function (druction, currentTime, time) {//时间同步$('.play_info_top .right').text(time)//进度条同步var present = (currentTime / druction) * 100process.processUpdate(present)})
//对象的方法:
processUpdate: function (value) {if (this, this.isMove) return;if (value < 0 || value > 100) return;//设置进度条高亮部分和球的比例this.play_info_current.css('width', value + '%')this.ball.css('left', value + '%')
}

纯享模式

纯享模式是在蒙版上复制之前的歌词元素节点实现

在这里插入图片描述

  • 点击纯净触发蒙版的fadeIn,再次点击fadeOut
 //纯享事件监听
$('.bottom_in .music_pure').click(function () {$('.pureMask').stop().fadeIn(300)$('.pureMask >.pure_container').empty()var $item = $('.center_right .song_word_container').clone(true)$('.pureMask >.pure_container').append('<a href="javascript:;" class="music_pure"></a>')$('.pureMask>.pure_container').append($item)})$('.pureMask').delegate(".pure_container .music_pure", "click", function () {$('.pureMask').stop().fadeOut(300)
})

案例下载地址

  • 下载地址
文章来源:https://blog.csdn.net/CSDNzhaojiale/article/details/106967203
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/626322.html

相关文章

「软工博客作业」:QQ音乐VS网易云音乐

项目内容这个作业属于哪个课程2023年北航敏捷软件工程社区这个作业的要求在哪里个人作业-软件案例分析我在这个课程的目标是学习有关软件开发的方法论&#xff0c;熟悉基本的软件开发流程&#xff0c;通过“做中学”提高软件开发的能力这个作业在哪个具体方面帮助我实现目标了解…

android 通知栏歌词,状态栏歌词插件下载

状态栏歌词能够将歌词放在状态栏上面&#xff0c;现在适配了很多型号的手机&#xff0c;悬浮窗的歌词有时候会影响我们看字&#xff0c;但是将歌词放在状态栏上之后&#xff0c;就不会在有这种烦恼&#xff0c;在这里还能自己编辑歌词的样式&#xff0c;让手机更加美观好看&…

zepto+less写QQ音乐播放界面,进度条同步,歌词同步高亮等等(带注释,可参考可直接使用)

这是效果图&#xff0c;小编截下来的是静态图片&#xff0c;真是都是可以动的 不多说&#xff0c;直接上代码&#xff0c;注释都写在代码里清清楚楚 less sizeMan:100%; //关键帧动画函数 .keyframes(name:move,content){ // name:动画名&#xff0c;content&#xff1a;动…

2019最新版QQ音乐api调用(原创)

下载QQ音乐任意歌曲方法&#xff1a; 1.首先在QQ音乐任意播放页面 2.进入开发者模式按F12即可 3.选择network&#xff0c;按ctrlR进行筛选多媒体文件 4.优先选择大小排序右击最大的多媒体文件出来快捷菜单&#xff0c;选择如下图的选项即可进入歌曲播放页面 5.如下链接就是播放…

爬取QQ音乐周杰伦歌曲的歌词

代码如下&#xff1a; import requests import json # 引用requests,json模块url https://c.y.qq.com/soso/fcgi-bin/client_search_cpheaders {origin:https://y.qq.com,# 请求来源&#xff0c;本案例中其实是不需要加这个参数的&#xff0c;只是为了演示referer:https://y…

Android UI之自定义——最简单的仿QQ音乐歌词颜色渐变

转载请注明本文出自JFlex的博客http://blog.csdn.net/jflex/article/details/46550849,请尊重他人的辛勤劳动成果&#xff0c;谢谢&#xff01; Android UI之自定义——最简单的仿QQ音乐歌词颜色渐变 记得刚开始做android的时候&#xff0c;就发现QQ音乐歌词颜色渐变的效果&a…

python爬虫qq音乐歌词_Python如何爬取qq音乐歌词到本地

前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 闲来无事听听歌&#xff0c;听到无聊唠唠嗑&#xff0c;你有没有特别喜欢的音乐,你有没有思考或者尝试过把自己喜欢的歌曲的歌词全部给下载下来呢?…

android qq音乐歌词怎么实现,Android自定义View,高仿QQ音乐歌词滚动控件!

最近在以QQ音乐为样板做一个手机音乐播放器&#xff0c;源码下篇博文放出。今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题&#xff0c;和小伙伴们一起来探讨怎么实现这个歌词滚动的效果。OK&#xff0c;废话不多说&#xff0c;先来看看效果图&#xff1a; 好&#xff0c…