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

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() {
        $.ajax({
            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)
                    $ul.append($item)
                })
            }

        }
        )
    }
    //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

 //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
            initInfo($music)
            //Lyrics information
            lyrics.loadLyrics($music.link_lrc)

        }) 
//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_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 + ")")

    }

Song playing

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) {
                    this.item.play()
                } else {
                    this.item.pause()
                }
            } else {
                //A different song
                this.$item.attr('src', music.link_url)
                this.item.play()
                this.currentIndex = index
            }
        },

Movement of progress bar

• 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
    process.processUpdate(present)

})
//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

• Click pure to trigger the mask's fadeIn, and then click fadeOut again

 //Exclusive event monitoring
$('.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)
})

Case download address

('.pureMask>.pure_container').append($item)

})

$('.pureMask').delegate(".pure_container .music_pure", "click", function () {
$('.pureMask').stop().fadeOut(300)
})

##Case download address

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