QQ music player jQuery implementation

QQ music player

Case presentation

Functions of case realization

  1. Layout of static pages
  2. Dynamic display of song information
  3. Mouse over, function button and text highlight
  4. Dynamic display of song information
  5. Song playing
  6. Progress bar display and dynamic movement
  7. Template setting and lyrics writing in pure mode

Case layout

Dynamic loading of songs

In fact, it is to dynamically add li to the middle left ul to realize dynamic data display

  1. To load data dynamically, you need existing data:
    1. Load data dynamically through $. ajax({}) (Note: there is a cross domain problem in loading local files, it is recommended to open the local server)
  2. Data in cycle period, dynamic creation li added to ul
    1. Through $. each() loop out the data to create the function createInfo() dynamically
  3. The last two sentences of createInfo are to let each DOM object add corresponding information so that when you click, you can know which data it is
//Load data
function info() {
            url: "./source/musiclist.json",
            dataType: "json",
            success: function (data) {
                player.musicList = data
                var $ul = $('.center_list #mCSB_1_container')
                $.each(data, function (index, value) {
                    var $item = createInfo(index, value)

    //Create Song li information
    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="play" class="play_music"></a><a href="javascript:;" title="add to"></a><a href="javascript:;" title="download"></a><a href="javascript:;" title="share"></a></div></div><div class="content_singer">' + value.singer + '</div><div class="content_time"> <span>' + value.time + '</span><a href="javascript:;" title="delete" class="deleteLi"></a></div></li >')
        item.get(0).index = index
        item.get(0).music = value
        return item

Dynamic display of song information

When playing a song, get the information of its corresponding DOM element, and dynamically replace the song information

 //Bind event to play button - event delegation
        $('.center_list').delegate('.play_music', "click", function () {

            var $music = $(this).parents('.content_common').get(0).music
            var $index = $(this).parents('.content_common').get(0).index
			//Song information
            //Lyrics information

//Song information
    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.text(music.name + "-" + music.singer)
        $song_info_time.text('00:00/' + music.time)
        $mask_bj.css('background', "url(" + music.cover + ")")


Song playing

Song playing is simply to switch the src attribute of < audio src = "" >

  1. Click that li to get the corresponding DOM information
  2. Get the play src address in the information
  3. Switch src address
 //Bind event to play button - event delegation
 $('.center_list').delegate('.play_music', "click", function () {
            var $music = $(this).parents('.content_common').get(0).music
            var $index = $(this).parents('.content_common').get(0).index
            //Object to dynamically switch src addresses
			player.playMucis($index, $music)


//Method part in object
 playMucis: function (index, music) {
     //The currentIndex property is used to store the index of a played song, and judge whether to switch src or pause the song
            if (index == this.currentIndex) {
                //Same song
                if (this.item.paused) {
                } else {
            } else {
                //A different song
                this.$item.attr('src', music.link_url)
                this.currentIndex = index

Movement of progress bar

The moving of the progress bar is determined by how much the highlighted part occupies in the background part

  • Adjust the moving proportion of the progress bar by the proportion of the current playing time and the total time

//Monitor playback time
player.playTime(function (druction, currentTime, time) {
    //time synchronization 
    $('.play_info_top .right').text(time)
    //Progress bar synchronization
    var present = (currentTime / druction) * 100

//Object method:
processUpdate: function (value) {
    if (this, this.isMove) return;
    if (value < 0 || value > 100) return;
    //Set the proportion between the highlighted part of the progress bar and the ball
    this.play_info_current.css('width', value + '%')
    this.ball.css('left', value + '%')

Pure mode

Pure mode is the implementation of the lyric element node before copying on the mask

  • Click pure to trigger the mask's fadeIn, and then click fadeOut again
 //Exclusive event monitoring
$('.bottom_in .music_pure').click(function () {
    $('.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').delegate(".pure_container .music_pure", "click", function () {

Case download address



$('.pureMask').delegate(".pure_container .music_pure", "click", function () {

##Case download address

[download address]( https://gitee.com/zhao_jia_le/test)

Tags: Javascript JSON Attribute

Posted on Thu, 25 Jun 2020 23:02:36 -0400 by bassdog65