Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how WeChat Mini Programs makes a music player". In daily operation, I believe many people have doubts about how WeChat Mini Programs makes a music player. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how WeChat Mini Programs makes a music player"! Next, please follow the editor to study!

The page is divided into three parts: the top information bar (song name / album name), the record chart in the middle, and the control button below.

The first is the information bar:

{{playingMusic.name}}

* {{item.name}}

Copy the code

This part is very simple and similar to what we wrote earlier, multiple singers are separated by "*". The format file is:

. song-info {

Width:100%

Padding:30rpx

Box-sizing:border-box

Text-align:center

}

. song-title {

Display:block

Width:100%

Color:#fff

Font-size:36rpx

Line-height:60rpx

Overflow:hidden

White-space:nowrap

Text-overflow:ellipsis

}

. song-subtitle {

Display:block

Width:100%

Font-size:28rpx

Line-height:40rpx

Color:rgba (255pr. 255pr. 6)

Overflow:hidden

White-space:nowrap

Text-overflow:ellipsis

}

Copy the code

Then there is the picture in the middle, which we show in the form of animation, let the record keep spinning, first look at the layout file:

"cd-gan" is the white lever part of the record section, and "cd-inner" is the record part. Here, add a black background to it to represent the record, and then use a small circle of "cd-img" in the door to load the web pictures we got. Finally, add the animation "cd-animation" to the whole album. All this work is done by format files.

. cd-info {

Position: relative

Width: 100%

Text-align: center

Padding-top: 120rpx

}

. cd-gan {

Position: absolute

Left: 50%

Margin-top:-80rpx

Margin-left:-150rpx

Display: block

Width: 300rpx

Height: 200rpx

Background: url ('.. /.. / resources/images/cd_g.png')

Background-size: cover

Z-index: 10

}

. cd-inner {

Position: relative

Display: inline-block

Z-index: 4

Height: 500rpx

Width: 500rpx

Background: url ('.. /.. / resources/images/cd_b.png')

Background-size: cover

Text-align: center

Padding-top: 100rpx

Box-sizing: border-box

}

. cd-animation {

-webkit-animation: circle 10s infinite linear

Animation: circle 10s infinite linear

}

. cd-img {

Display: inline-block

Width: 300rpx

Height: 300rpx

Border-radius: 50%

}

@ keyframes circle {

0% {

Transform: rotate (0deg)

}

100% {

Transform: rotate (360deg)

}

}

Copy the code

Most of the code in this I believe you are already familiar with, focus on the "cd-animation" part, here loaded the animation "circle" and set the animation length and infinite loop, so as to achieve the effect of music playback, the record has been rotated. "circle" animation we use keyframe keyframes to achieve.

After completing these two parts, we wrap them in a view to determine its location on the page.

{{playingMusic.name}}

* {{item.name}}

. main-box {

Position: absolute

Top: 0

Bottom: 308rpx

Z-index: 3

Width: 100%

Background: rgba (0,0,0,0.2)

}

Copy the code

Then we finish the operation part below.

{{currTimeStr}}

{{musicTimeStr}}

Copy the code

The operation control part consists of the top progress bar section "slider-box" and the bottom operation button "mucis-ctr". In the progress bar, we use the slider component, and the two segments use two text components to display the current playback time and the total duration. In the operation button part, the first is the button in the playback mode, which changes the order / random / single playback mode according to the value of playType and loads different pictures accordingly. Then there are three buttons, each representing the previous song / play / next song. Finally, there is a button that displays the playlist.

The format file is:

. slider-box {

Box-sizing: border-box

Padding: 20rpx 130rpx

}

. slider-text {

Position: absolute

Display: block

Width: 100rpx

Height: 40rpx

Line-height: 40rpx

Font-size: 24rpx

Color: # fff

}

. st-l {

Left: 60rpx

}

. st-r {

Top: 20rpx

Right: 40rpx

Text-align: right

}

. slider-inner {

Width: 100%

}

. ctre-box {

Height: 308rpx

Position: absolute

Bottom: 0

Z-index: 3

Width: 100%

Background: rgba (0,0,0,0.2)

}

. music-ctr {

Position: relative

Padding: 20rpx 120rpx

}

. music-sort {

Position: absolute

Left: 20rpx

Width: 108rpx

Height: 108rpx

}

. ms-loop {

Background: url (".. /.. / resources/images/play_icn_loop.png")

Background-size: cover

}

. ms-one {

Background: url (".. /.. / resources/images/play_icn_one.png")

Background-size: cover

}

. ms-shuffle {

Background: url (".. /.. / resources/images/play_icn_shuffle.png")

Background-size: cover

}

.music-list-btn {

Position: absolute

Top: 36rpx

Right: 20rpx

Width: 108rpx

Height: 108rpx

Background: url (".. /.. / resources/images/play_icn_src.png")

Background-size: cover

}

. mc-inner {

Text-align: center

}

. mci-icon {

Display: inline-block

Width: 142rpx

Height: 142rpx

}

. mci-prev {

Background: url (".. /.. / resources/images/play_btn_prev.png")

Background-size: cover

}

. mci-play {

Background: url (".. /.. / resources/images/play_btn_play.png")

Background-size: cover

}

. mci-pause {

Background: url (".. /.. / resources/images/play_btn_pause.png")

Background-size: cover

}

. mci-next {

Background: url (".. /.. / resources/images/play_btn_next.png")

Background-size: cover

}

Copy the code

Finally, write down the layout of the playlist:

Playlist (185)

Empty

{{item.name}}

Close

Copy the code

The format file is:

. play-list {

Position: absolute

Top: 20%

Bottom: 0

Left: 0

Width: 100%

Z-index: 99

Background: rgba (255,255,255,0.95)

}

.play-list-header {

Line-height: 88rpx

Font-size: 32rpx

Text-align: center

Border-bottom: 2rpx solid rgba (0,0,0,0.1)

}

.play-list-clear {

Position: absolute

Right: 30rpx

Font-size: 28rpx

Color: rgba (0,0,0,0.6)

}

.play-list-bottom {

Position: absolute

Width: 100%

Bottom: 0

Height: 100rpx

Line-height: 100rpx

Text-align: center

Font-size: 32rpx

Border-top: 2rpx solid rgba (0,0,0,0.1)

}

.play-list-inner {

Position: absolute

Top: 90rpx

Bottom: 102rpx

Width: 100%

Overflow-x: hidden

Overflow-y: auto

Padding-left: 20rpx

}

. play-item {

Position: relative

Widows: 100%

Box-sizing: border-box

Padding-right: 90rpx

Height: 88rpx

Line-height: 88rpx

Font-size: 30rpx

Border-bottom: 2rpx solid rgba (0,0,0,0.1)

White-space: nowrap

Overflow: hidden

Text-overflow: ellipsis

}

Copy the code

Here we use "z-index: 99 position background: rgba (255,255,255,0.95);" to make the playlist cover part of the music playback page and the background is translucent.

Finally, we use a view to load the background for the entire page, which blurs the image we get. Finally, wrap all the layouts with a view.

...

Copy the code

Use format files to add a blur effect:

. paly-view {

Display: block

Position: relative

Width: 100%

Height: 100%

Overflow: hidden

}

.blur {

Filter: blur (80rpx)

}

.bg {

Position: absolute

Left: 0

Right: 0

Top: 0

Bottom: 0

Background-size: cover

Background-position: bottom center

}

Copy the code

Finally, we load the data:

Var app = getApp ()

Page ({

Data: {

PlayList: []

PlayIndex: 0

ShowPlayList: true

PlayingMusic: {}

MusicTime: 0

CurrTime: 0

MusicTimeStr: 0

CurrTimeStr: 0

IsPlay: false

PlayInv: 0

PlayPro:''

PlayType: 1

}

OnLoad: function (options) {

/ / parameters brought by page initialization options for page jump

Var self = this

Var list = app.globalData.playList

Var playingMusic = null

If (list.length) {

Var index = app.globalData.playIndex

Index = (list.length-1 < index)? List.length-1: index

PlayingMusic = list [index]

This.setData ({

PlayList: list

PlayIndex: index

PlayingMusic: playingMusic

});

}

Wx.playBackgroundAudio ({

DataUrl: list[index] .url

Title: list[index] .title

CoverImgUrl: list[index] .img

Success: function () {

}

Fail: function () {

Console.log ('playback failed!')

}

});

}

ChangePlayType: function (e) {

Var dataSet = e.currentTarget.dataset

If (dataSet.type = = 1) {

This.setData ({

PlayType: 2

});

}

If (dataSet.type = = 2) {

This.setData ({

PlayType: 0

});

}

If (dataSet.type = = 0) {

This.setData ({

PlayType: 1

});

}

}

ClosePlayList: function (e) {

This.setData ({

ShowPlayList: true

})

}

ShowPlayList: function (e) {

This.setData ({

ShowPlayList: false

})

}

/ / Click events of three buttons

PauseMusic: function () {

}

PlayNextMusic: function () {

}

PlayPreMusic:function () {

}

})

At this point, the study on "how to make a music player by WeChat Mini Programs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.