当前位置：网站首页>Develop a customized music player from scratch, and your girlfriend will have it?
Develop a customized music player from scratch, and your girlfriend will have it?
2022-06-24 04:51:00 【Geek Jiangnan】
Today I'll take you to use 1 Hours , Code a custom version of the music player out , It's exciting to think about it .
Learn this , It's a step further from everyone finding a girlfriend .
Supporting code and material download link ：
I don't say much nonsense , Old rules , Let's start with an effect picture ：
- The development train of thought
Develop a custom music player , First you need to know the logic of the music player , Realization principle .
Development technology
- html
- css
- jq
Realize the idea
- 1. Organize and collect materials
- 2. utilize html + css Layout QQ Music player interface
- 3. Import jq Libraries and third-party plug-ins
- 4. Implement music player , Play , Lyrics synced 、 The logic of background transformation
material
- The material mainly includes , Pictures and music materials .
- song 、 Background map , The background color can be customized , You can collect materials according to your favorite songs
Core logic
- Custom scroll bar
- Load song list
- Initialize song information
- Initialize lyrics information
- Initialize progress bar
- Initialize event listening
- Monitor the progress of playback
- Listen for sound button clicks
- Realize the playback and deletion of different music
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ Music player - Geek Jiangnan </title>
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/player.js"></script>
<script src="js/progress.js"></script>
<script src="js/lyric.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="header">
<h1 class="logo"><a href="#"></a></h1>
<ul class="register">
<li> Sign in </li>
<li> Set up </li>
</ul>
</div>
<div class="content">
<div class="content_in">
<div class="content_left">
<div class="content_toolbar">
<span><i></i> Collection </span>
<span><i></i> Add to </span>
<span><i></i> download </span>
<span><i></i> Delete </span>
<span><i></i> clear list </span>
</div>
<div class="content_list" data-mcs-theme="minimal-dark">
<ul>
<li class="list_title">
<div class="list_check"><i></i></div>
<div class="list_number"></div>
<div class="list_name"> song </div>
<div class="list_singer"> singer </div>
<div class="list_time"> Duration </div>
</li>
</ul>
</div>
</div>
<div class="content_right">
<div class="song_info">
<a href="https://mp.weixin.qq.com/s/sb9n8dFe96XR6pRxEpZx0Q" class="song_info_pic">
<img src="images/4.png" alt="">
</a>
<div class="song_info_name"> Song name :
<a href="javascript:;"> Exclusive player </a>
</div>
<div class="song_info_singer"> The singer's name :
<a href="javascript:;"> Code love </a>
</div>
<div class="song_info_ablum"> Album name :
<a href="javascript:;"> copyright </a>
</div>
</div>
<div class="song_lyric_container">
<ul class="song_lyric">
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_in">
<a href="javascript:;" class="music_pre"></a>
<a href="javascript:;" class="music_play"></a>
<a href="javascript:;" class="music_next"></a>
<div class="music_progress_info">
<div class="music_progress_top">
<span class="music_progress_name"> Play programming from zero / Geek Jiangnan </span>
<span class="music_progress_time">00:00 / 05:23</span>
</div>
<div class="music_progress_bar">
<div class="music_progress_line">
<div class="music_progress_dot"></div>
</div>
</div>
</div>
<a href="javascript:;" class="music_mode"></a>
<a href="javascript:;" class="music_fav"></a>
<a href="javascript:;" class="music_down"></a>
<a href="javascript:;" class="music_comment"></a>
<a href="javascript:;" class="music_only"></a>
<div class="music_voice_info">
<a href="javascript:;" class="music_voice_icon"></a>
<div class="music_voice_bar">
<div class="music_voice_line">
<div class="music_voice_dot"></div>
</div>
</div>
</div>
</div>
</div>
<div class="mask_bg"></div>
<div class="mask"></div>
<audio src=""></audio>
</body>
</html>CSS Code
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
font-size: 14px;
}
.header{
width: 100%;
height: 45px;
}
.header .logo{
float: left;
margin-left: 20px;
opacity: 0.5;
}
.header .logo:hover{
opacity: 1;
}
.header .logo a{
display: inline-block;
width: 78px;
height: 21px;
background: url("../images/player_logo.png") no-repeat 0 0;
}
.header .register{
float: right;
line-height: 45px;
}
.header .register li{
list-style: none;
float: left;
margin-right: 20px;
color: #fff;
opacity: 0.5;
}
.header .register li:hover{
opacity: 1;
}
.content{
width: 100%;
height: 460px;
}
.content .content_in{
width: 1200px;
height: 100%;
margin: 0 auto;
}
.content_in .content_left{
float: left;
width: 800px;
height: 100%;
}
.content_left .content_toolbar{
width: 100%;
height: 40px;
}
.content_toolbar span{
display: inline-block;
width: 122px;
height: 100%;
line-height: 40px;
text-align: center;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 5px;
color: #fff;
opacity: 0.5;
}
.content_toolbar span:hover{
opacity: 1;
}
.content_toolbar span i{
display: inline-block;
width: 18px;
height: 18px;
background: url("../images/icon_sprite.png") no-repeat 0 0;
margin-right: 10px;
vertical-align: -5px;
}
.content_toolbar span:nth-child(1) i{
background-position: -60px -20px;
}
.content_toolbar span:nth-child(2) i{
background-position: -20px -20px;
}
.content_toolbar span:nth-child(3) i{
background-position: -40px -240px;
}
.content_toolbar span:nth-child(4) i{
background-position: -100px -20px;
}
.content_toolbar span:nth-child(5) i{
background-position: -40px -300px;
}
.content_left .content_list{
width: 100%;
height: 420px;
overflow: auto;
}
.content_list li{
list-style: none;
width: 100%;
height: 50px;
border-bottom: 1px solid rgba(255,255,255,0.5);
box-sizing: border-box;
user-select: none;
}
.content_list li div{
float: left;
color: rgba(255,255,255,0.5);
line-height: 50px;
/*opacity: 0.5;*/
}
.content_list .list_check{
width: 50px;
height: 100%;
text-align: center;
}
.content_list .list_check i{
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #fff;
opacity: 0.5;
}
.content_list .list_checked i{
background: url("../images/icon_sprite.png") no-repeat -60px -80px;
opacity: 1;
}
.content_list .list_number{
width: 20px;
height: 100%;
}
.content_list .list_number2{
color: transparent !important;
background: url("../images/wave.gif") no-repeat 0 center;
}
.content_list .list_name{
width: 50%;
height: 100%;
}
.list_name .list_menu{
margin-top: 5px;
float: right;
margin-right: 20px;
display: none;
}
.list_menu a{
display: inline-block;
width: 36px;
height: 36px;
background: url("../images/icon_list_menu.png") no-repeat 0 0;
opacity: 0.5;
}
.list_menu a:hover{
opacity: 1;
}
.list_menu a:nth-child(1){
background-position: -120px 0;
}
.list_menu a:nth-child(2){
background-position: -120px -80px;
}
.list_menu a:nth-child(3){
background-position: -120px -120px;
}
.list_menu a:nth-child(4){
background-position: -120px -40px;
}
.list_menu .list_menu_play2{
background-position: -80px -200px !important;
}
.content_list .list_singer{
width: 20%;
height: 100%;
}
.content_list .list_time a{
display: inline-block;
width: 36px;
height: 36px;
background: url("../images/icon_list_menu.png") no-repeat -120px -160px;
float: left;
margin-top: 5px;
display: none;
opacity: 0.5;
}
.content_list .list_time a:hover{
opacity: 1;
}
.content_in .content_right{
float: right;
width: 400px;
height: 100%;
user-select: none;
}
.content_right .song_info{
text-align: center;
color: rgba(255,255,255,0.5);
line-height: 30px;
}
.song_info .song_info_pic{
display: inline-block;
background: url("../images/album_cover_player.png") no-repeat 0 0;
width: 201px;
height: 180px;
text-align: left;
}
.song_info_pic img{
width: 200px;
height: 180px;
}
.song_info div a{
text-decoration: none;
color: #fff;
opacity: 0.5;
}
.song_info div a:hover{
opacity: 1;
}
.content_right .song_lyric_container{
margin-top: 30px;
height: 150px;
overflow: hidden;
}
.content_right .song_lyric{
text-align: center;
}
.content_right .song_lyric li{
list-style: none;
line-height: 30px;
font-weight: bold;
color: rgba(255,255,255,0.5);
}
.content_right .song_lyric .cur{
color: #31c27c;
}
.footer{
width: 100%;
height: 80px;
position: absolute;
left: 0;
bottom: 0;
}
.footer .footer_in{
width: 1200px;
height: 100%;
margin: 0 auto;
user-select: none;
}
.footer_in a{
display: inline-block;
text-decoration: none;
color: #fff;
background: url("../images/player.png") no-repeat 0 0;
margin-right: 20px;
}
.footer_in .music_pre{
width: 19px;
height: 20px;
background-position: 0 -30px;
}
.footer_in .music_play{
width: 21px;
height: 29px;
background-position: 0 0;
vertical-align: -5px;
}
.footer_in .music_play2{
background-position: -30px 0;
}
.footer_in .music_next{
width: 19px;
height: 20px;
background-position: 0 -52px;
}
.footer_in .music_progress_info{
display: inline-block;
width: 670px;
height: 40px;
position: relative;
top: 10px;
}
.music_progress_info .music_progress_top{
width: 100%;
height: 30px;
line-height: 30px;
color: #fff;
}
.music_progress_top .music_progress_name{
float: left;
opacity: 0.5;
}
.music_progress_top .music_progress_name:hover{
opacity: 1;
}
.music_progress_top .music_progress_time{
float: right;
opacity: 0.5;
}
.music_progress_info .music_progress_bar{
width: 100%;
height: 4px;
background: rgba(255,255,255,0.5);
margin-top: 5px;
position: relative;
}
.music_progress_bar .music_progress_line{
width: 0px;
height: 100%;
background: #fff;
}
.music_progress_line .music_progress_dot{
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
position: absolute;
top: -5px;
left: 0px;
}
.footer_in .music_mode{
width: 26px;
height: 25px;
background-position: 0 -205px;
}
.footer_in .music_mode2{
width: 23px;
height: 20px;
background-position: 0 -260px;
}
.footer_in .music_mode3{
width: 25px;
height: 19px;
background-position: 0 -74px;
}
.footer_in .music_mode4{
width: 26px;
height: 25px;
background-position: 0 -232px
}
.footer_in .music_fav{
width: 24px;
height: 21px;
background-position: 0 -96px;
}
.footer_in .music_fav2{
background-position: -30px -96px;
}
.footer_in .music_down{
width: 22px;
height: 21px;
background-position: 0 -120px;
}
.footer_in .music_comment{
width: 24px;
height: 24px;
background-position: 0 -400px;
}
.footer_in .music_only{
width: 74px;
height: 27px;
background-position: 0 -281px;
}
.footer_in .music_only2{
background-position: 0 -310px;
}
.footer_in .music_voice_info{
display: inline-block;
width: 100px;
height: 40px;'
line-height: 40px;
position: relative;
top: 10px;
}
.music_voice_info .music_voice_icon{
width: 26px;
height: 21px;
background-position: 0 -144px;
position: absolute;
left: 0;
top: 10px;
}
.music_voice_info .music_voice_icon2{
background-position: 0 -182px;
}
.music_voice_info .music_voice_bar{
width: 70px;
height: 4px;
background: rgba(255,255,255,0.5);
position: absolute;
right: 0;
top: 18px;
}
.music_voice_bar .music_voice_line{
width: 70px;
height: 100%;
background: #fff;
}
.music_voice_line .music_voice_dot{
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
position: relative;
top: -5px;
left: 70px;
}
.mask_bg{
position: absolute;
left: 0;
top: 0;
z-index: -2;
width: 100%;
height: 100%;
background: url("../images/lnj.jpg") no-repeat 0 0;
background-size: cover;
filter: blur(100px);
}
.mask{
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
}
._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar{
width:8px;
}JS Core code
$(function () {
// 0. Custom scroll bar
$(".content_list").mCustomScrollbar();
var $audio = $("audio");
var player = new Player($audio);
var progress;
var voiceProgress;
var lyric;
// 1. Load song list
getPlayerList();
function getPlayerList() {
$.ajax({
url: "./source/musiclist.json",
dataType: "json",
success: function (data) {
player.musicList = data;
// 3.1 Traverse the obtained data , Create every piece of music
var $musicList = $(".content_list ul");
$.each(data, function (index, ele) {
var $item = crateMusicItem(index, ele);
$musicList.append($item);
});
initMusicInfo(data[0]);
initMusicLyric(data[0]);
},
error: function (e) {
console.log(e);
}
});
}
// 2. Initialize song information
function initMusicInfo(music){
// Get the corresponding element
var $musicImage = $(".song_info_pic images");
var $musicName = $(".song_info_name a");
var $musicSinger = $(".song_info_singer a");
var $musicAblum = $(".song_info_ablum a");
var $musicProgressName = $(".music_progress_name");
var $musicProgressTime = $(".music_progress_time");
var $musicBg = $(".mask_bg");
// Assign a value to the obtained element
$musicImage.attr("src", music.cover);
$musicName.text(music.name);
$musicSinger.text(music.singer);
$musicAblum.text(music.album);
$musicProgressName.text(music.name +" / "+ music.singer);
$musicProgressTime.text("00:00 / "+ music.time);
$musicBg.css("background", "url('"+music.cover+"')");
}
// 3. Initialize lyrics information
function initMusicLyric(music){
lyric = new Lyric(music.link_lrc);
var $lryicContainer = $(".song_lyric");
// Clear the lyrics of the previous music
$lryicContainer.html("");
lyric.loadLyric(function () {
// Create a list of lyrics
$.each(lyric.lyrics, function (index, ele) {
var $item = $("<li>"+ele+"</li>");
$lryicContainer.append($item);
});
});
}
// 4. Initialize progress bar
initProgress();
function initProgress(){
var $progressBar = $(".music_progress_bar");
var $progressLine = $(".music_progress_line");
var $progressDot = $(".music_progress_dot");
progress = Progress($progressBar,$progressLine,$progressDot);
progress.progressClick(function (value) {
player.musicSeekTo(value);
});
progress.progressMove(function (value) {
player.musicSeekTo(value);
});
var $voiceBar = $(".music_voice_bar");
var $voiceLine = $(".music_voice_line");
var $voiceDot = $(".music_voice_dot");
voiceProgress = Progress($voiceBar,$voiceLine,$voiceDot);
voiceProgress.progressClick(function (value) {
player.musicVoiceSeekTo(value);
});
voiceProgress.progressMove(function (value) {
player.musicVoiceSeekTo(value);
});
}
// 5. Initialize event listening
initEvents();
function initEvents() {
// 1. Monitor the move in and move out events of songs
$(".content_list").delegate(".list_music", "mouseenter", function () {
// Show submenu
$(this).find(".list_menu").stop().fadeIn(100);
$(this).find(".list_time a").stop().fadeIn(100);
// The duration of hiding
$(this).find(".list_time span").stop().fadeOut(100);
});
$(".content_list").delegate(".list_music", "mouseleave", function () {
// Hide submenu
$(this).find(".list_menu").stop().fadeOut(100);
$(this).find(".list_time a").stop().fadeOut(100);
// According to the length
$(this).find(".list_time span").stop().fadeIn(100);
});
// 2. Listen for click events in the check box
$(".content_list").delegate(".list_check", "click", function () {
$(this).toggleClass("list_checked");
});
// 3. Add sub menu play button monitoring
var $musicPlay = $(".music_play");
$(".content_list").delegate(".list_menu_play", "click", function () {
var $item = $(this).parents(".list_music");
// console.log($item.get(0).index);
// console.log($item.get(0).music);
// 3.1 Toggle playback icon
$(this).toggleClass("list_menu_play2");
// 3.2 Restore other playback icons
$item.siblings().find(".list_menu_play").removeClass("list_menu_play2");
// 3.3 Sync bottom play button
if($(this).hasClass("list_menu_play2")){
// The play button of the current submenu is play status
$musicPlay.addClass("music_play2");
// Highlight the text
$item.find("div").css("color", "#fff");
$item.siblings().find("div").css("color", "rgba(255,255,255,0.5)");
}else{
// The play button of the current submenu is not in play status
$musicPlay.removeClass("music_play2");
// Let the text not highlight
$item.find("div").css("color", "rgba(255,255,255,0.5)");
}
// 3.4 Switch the status of serial number
$item.find(".list_number").toggleClass("list_number2");
$item.siblings().find(".list_number").removeClass("list_number2");
// 3.5 Play music
player.playMusic($item.get(0).index, $item.get(0).music);
// 3.5 Switch song information
initMusicInfo($item.get(0).music);
// 3.6 Switch lyrics information
initMusicLyric($item.get(0).music);
});
// 4. Listen for the click of the play button in the bottom control area
$musicPlay.click(function () {
// Judge if music has been played
if(player.currentIndex == -1){
// No music played
$(".list_music").eq(0).find(".list_menu_play").trigger("click");
}else{
// Music has been played
$(".list_music").eq(player.currentIndex).find(".list_menu_play").trigger("click");
}
});
// 5. Listen to the click of a button on the bottom control area
$(".music_pre").click(function () {
$(".list_music").eq(player.preIndex()).find(".list_menu_play").trigger("click");
});
// 6. Listen to the next button click in the bottom control area
$(".music_next").click(function () {
$(".list_music").eq(player.nextIndex()).find(".list_menu_play").trigger("click");
});
// 7. Listen to the delete button click
$(".content_list").delegate(".list_menu_del", "click", function () {
// Find the music you click on
var $item = $(this).parents(".list_music");
// Determine whether the current deleted is playing
if($item.get(0).index == player.currentIndex){
$(".music_next").trigger("click");
}
$item.remove();
player.changeMusic($item.get(0).index);
// reorder
$(".list_music").each(function (index, ele) {
ele.index = index;
$(ele).find(".list_number").text(index + 1);
});
});
// 8. Monitor the progress of playback
player.musicTimeUpdate(function (currentTime, duration, timeStr) {
// Synchronization time
$(".music_progress_time").text(timeStr);
// Sync progress bar
// Calculate the playback ratio
var value = currentTime / duration * 100;
progress.setProgress(value);
// Synchronization of lyrics
var index = lyric.currentIndex(currentTime);
var $item = $(".song_lyric li").eq(index);
$item.addClass("cur");
$item.siblings().removeClass("cur");
// Achieve lyrics scrolling
if(index <= 2) return;
$(".song_lyric").css({
marginTop: (-index + 2) * 30
});
});
// 9. Listen for sound button clicks
$(".music_voice_icon").click(function () {
// Icon switching
$(this).toggleClass("music_voice_icon2");
// Sound switching
if($(this).hasClass("music_voice_icon2")){
// Become silent
player.musicVoiceSeekTo(0);
}else{
// Become a sound
player.musicVoiceSeekTo(1);
}
});
}
// Define a method to create a piece of music
function crateMusicItem(index, music) {
var $item = $("" +
"<li class=\"list_music\">\n" +
"<div class=\"list_check\"><i></i></div>\n" +
"<div class=\"list_number\">"+(index + 1)+"</div>\n" +
"<div class=\"list_name\">"+music.name+"" +
" <div class=\"list_menu\">\n" +
" <a href=\"javascript:;\" title=\" Play \" class='list_menu_play'></a>\n" +
" <a href=\"javascript:;\" title=\" add to \"></a>\n" +
" <a href=\"javascript:;\" title=\" download \"></a>\n" +
" <a href=\"javascript:;\" title=\" Share \"></a>\n" +
" </div>\n" +
"</div>\n" +
"<div class=\"list_singer\">"+music.singer+"</div>\n" +
"<div class=\"list_time\">\n" +
" <span>"+music.time+"</span>\n" +
" <a href=\"javascript:;\" title=\" Delete \" class='list_menu_del'></a>\n" +
"</div>\n" +
"</li>");
$item.get(0).index = index;
$item.get(0).music = music;
return $item;
}
});Finally, in the last effect picture of switching songs ：
- The basic production process is not very difficult , The core is to understand the business logic .
Remember before collection , Like it first ！ Good articles are worth seeing by more people .
边栏推荐
- Integration of Alibaba cloud SMS services and reasons for illegal message signing
- SAP MTS/ATO/MTO/ETO专题之八：ATO模式2 D+空模式策略用85
- Physicochemical properties and specificity of Worthington trypsin
- 一文简述：供应链攻击知多少
- 2020年Android面试题汇总（中级）
- 5g and industrial Internet
- 解析90后创客教育的主观积极性
- How to open the port of ECS what are the precautions for using ECS
- Getattribute return value is null
- What if the ECS forgets its password? How can I retrieve my forgotten password?
猜你喜欢
Abnova peptide design and synthesis solutions
重新认识WorkPlus，不止IM即时通讯，是企业移动应用管理专家
线性回归的损失和优化，机器学习预测房价
Idea creates a servlet and accesses the 404 message
一款支持内网脱机分享文档的接口测试软件
Introduction à la méthode de descente par Gradient - document d'apprentissage automatique pour les programmeurs de chevaux noirs
SAP MTS/ATO/MTO/ETO专题之七：ATO模式1 M+M模式策略用82（6892）
How does the compiler put the first instruction executed by the chip at the start address of the chip?
大一下学期期末总结（补充知识漏洞）
Training methods after the reform of children's programming course
随机推荐
Detailed explanation of tcpip protocol
uni-app进阶之认证【day12】
After purchasing Tencent ECs, how to solve packet loss in Internet access?
Digital transformation practice of Zheshang Bank
Beauty of script │ VBS introduction interactive practice
What is an evpn switch?
Easyanticheat uses to inject unsigned code into a protected process (1)
Advanced authentication of uni app [Day12]
Introduction to C language custom types (structure, enumeration, union, bit segment)
What are the advantages of ECS? Is ECS better than VM?
Huawei cloud gaussdb (for redis) unveiling issue 19: gaussdb (for redis) comprehensive comparison with CODIS
阿里云混合云首席架构师张晓丹：政企混合云技术架构的演进和发展
Web penetration test - 5. Brute force cracking vulnerability - (8) PostgreSQL password cracking
What does VPS server mean? What is the difference between a VPS server and an ECS?
Customer disaster recovery case - a MySQL database migration scheme
How to control CDN traffic gracefully in cloud development?
Spirit breath development log (15)
Abnova多肽设计和合成解决方案
DP summary of ACM in recent two weeks
How to enlarge the ECS page? How to select ECS instance specifications?