前端-音乐播放器界面

功能说明：

1.点击音乐可播放

2.播放当前音乐可以将当前音乐的歌名以及歌手名在底部展示出来

效果如下：

当前专辑封面以及左下角图片为未播放音乐时的效果；

播放当前音乐底部会显示当前歌名以及歌手名

HTML:

musicPlayer 歌曲列表

Courtship Dating

Crystal Castle

Playlist

1
Crimewaves Crystal Castles
http://music.163.com/song/media/outer/url?id=26814942.mp3
...
2
Knight Crystal Castles
http://music.163.com/song/media/outer/url?id=1400069740.mp3
...
3
Air War Crystal Castles
http://music.163.com/song/media/outer/url?id=3985818.mp3
...
4
Untrust Us Crystal Castles
http://music.163.com/song/media/outer/url?id=3985834.mp3
...
5
Magic Spells Crystal Castles
http://music.163.com/song/media/outer/url?id=3985813.mp3
...
6
Not In Love Crystal Castles
http://music.163.com/song/media/outer/url?id=17159482.mp3
...
7
Reckless Crystal Castles
http://music.163.com/song/media/outer/url?id=1400069743.mp3
...
8
Black Panther Crystal Castles
http://music.163.com/song/media/outer/url?id=1400069744.mp3
...
9
Transgender Crystal Castles
http://music.163.com/song/media/outer/url?id=27142609.mp3
...
10
Air War Crystal Castles
http://music.163.com/song/media/outer/url?id=27142609.mp3
...

Name: Singer:

CSS:

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
}

.page {
    width: 100%;
    height: 100%;
}

.page .header {
    
    width: 100%;
    height: 9rem;
    line-height: 9rem;
    font-size: 1.8rem;
    padding-left: 3.5rem;
}

.page .player {
    display: flex;
    width: 100%;
    height: 17rem;
}

.player .left-img {
    width: 16rem;
    height: 14rem;
    padding-left: 3rem;
}

.left-img img {
    width: 14rem;
    height: 100%;
    border-radius: 10%;
}

.right-title {
    flex: 1;
    height: 100%;
}

.right-title-name {
    font-size: 1.9rem;
    font-weight: 700;
    padding-top: 1.3rem;
}

.right-title-band {
    font-size: 1.4rem;
    font-weight: 200;
    padding-top: 0.7rem;
}

.musiclist {
    width: 100%;
    height: 50rem;
    overflow-y: scroll;
    padding-bottom: 19rem;
}

.playlist {
    display: flex;
    height: 3.2rem;
}

.playlist-left {
    width: 50%;
    height: 100%;
    font-size: 1.5rem;
    float: left;
    margin-left: 2rem;
    border-bottom: 0.1rem dashed gray;
}

.playlist-right {
    width: 50%;
    height: 100%;
    margin-right: 2rem;
    border-bottom: 0.1rem dashed gray;
}

.songlist {
    width: 100%;
    height: 100%;
}

.song {
    width: 100%;
    height: 6rem;
    display: flex;
    position: relative;
}

.song .num {
    width: 15%;
    height: 100%;
}

.song-right {
    margin: auto 0;
    vertical-align: bottom;
}

.song-right p {
    display: none;
}

.song p {
    line-height: 7rem;
    font-size: 1.6rem;
    text-align: center;
}

.song-songname {
    width: 100%;
}




.song-songsinger {
    width: 100%;
    
}

.dot {
    width: 4rem;
    height: 2rem;
    position: absolute;
    font-size: 3rem;
    color: gray;
    top: 0.8rem;
    right: 0;
}

.bottom {
    width: 100%;
    height: 9rem;
    position: fixed;
    bottom: 0;
    background: white;
    
    display: flex;
}

.bottom-left {
    width: 20%;
    height: 100%;
}

.bottom-left img {
    width: 5rem;
    height: 5rem;
    padding-left: 3rem;
    padding-top: 2rem;
}

.bottom-middle {
    width: 80%;
    height: 100%;
    
}

.bottom-middle audio {
    padding-top: 0.5rem;
}

.bottom-middle .singer {
    overflow: hidden;
    padding-left: 1rem;
}

.bottom-middle .name {
    padding-left: 2rem;
}

JS:

var url = document.getElementsByClassName('url')
var li = document.querySelectorAll('.song')
var audio = document.getElementById('audio')
var pict = document.getElementsByTagName('img')
var span1 = document.querySelector('.name')
var span2 = document.querySelector('.singer')


for (let i = 0; i < li.length; i++) {
    li[i].addEventListener('click', function(e) {
        console.log(e.path[1].children[2].outerText)
        audio.src = e.path[1].children[2].outerText
        audio.play();
        pict[1].src = arr[i].songPic
        span1.innerHTML = arr[i].name
        span2.innerHTML = arr[i].singer
    })
}



var arr = [{
        name: 'Crimewaves',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/zzM8vRwZRo4YfizdtqA9PQ==/1252343744071234.jpg?param=130y130'
    },
    {
        name: 'Knight',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/zzM8vRwZRo4YfizdtqA9PQ==/1252343744071234.jpg?param=130y130'
    },
    {
        name: 'Air War',
        singer: 'Crystal Castles',
        songPic: 'http://p1.music.126.net/1UbzdtmWSYJmAQDleK-Jrg==/1773512255609857.jpg?param=130y130'
    },
    {
        name: 'Untrust Us',
        singer: 'Crystal Castles',
        songPic: 'http://p1.music.126.net/1UbzdtmWSYJmAQDleK-Jrg==/1773512255609857.jpg?param=130y130'
    },
    {
        name: 'Magic Spells',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/mokWqOx7sYS2o7T6mvyB8A==/6650945837418683.jpg?param=130y130'
    },
    {
        name: 'Not In Love',
        singer: 'Crystal Castles',
        songPic: 'http://p1.music.126.net/4cmtXCljm-jENjg8oDhByw==/2542070884781418.jpg?param=130y130'
    },
    {
        name: 'Reckless',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/xQs3Dfz4eFwC05Bi_TDFkg==/1282030558024374.jpg?param=120y120'
    },
    {
        name: 'Black Panther',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/xJfKLTrdD7whHygBpDqeVQ==/109951164458089137.jpg?param=130y130'
    },
    {
        name: 'Transgender',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/LuMYB1SlbmTeL8tEzggONw==/109951166568071646.jpg?param=120y120'
    },
    {
        name: '',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/xJfKLTrdD7whHygBpDqeVQ==/109951164458089137.jpg?param=130y130'
    }
]

注：音乐链接以及图片链接均来自wyymusic

前端-音乐播放器界面

Java相关栏目本月热门文章