前端-音乐播放器界面

最新推荐文章于 2024-03-27 14:20:09 发布

航航不脱发

最新推荐文章于 2024-03-27 14:20:09 发布

阅读量1.6k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_53821257/article/details/125469910

版权

这是一个简单的在线音乐播放器的实现，包含HTML、CSS和JavaScript代码。用户点击歌曲列表中的歌曲，播放器将播放所选音乐，并在底部显示当前播放的歌名和歌手名。页面还展示了专辑封面和歌曲列表，提供了良好的用户体验。

摘要由CSDN通过智能技术生成

功能说明：

1.点击音乐可播放

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

效果如下：

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

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

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>musicPlayer</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="page">
        <div class="header">歌曲列表</div>
        <div class="player">
            <div class="left-img">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="right-title">
                <p class="right-title-name">Courtship Dating</p>
                <p class="right-title-band">Crystal Castle</p>
            </div>
        </div>
        <div class="musiclist">
            <div class="playlist">
                <div class="playlist-left">Playlist</div>
                <div class="playlist-right"></div>

            </div>
            <div class="songlist">
                <ul>
                    <li class="song song1">
                        <div class="num">
                            <p>1</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Crimewaves
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=26814942.mp3</p>
                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song2">
                        <div class="num">
                            <p>2</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Knight
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=1400069740.mp3</p>
                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song3">
                        <div class="num">
                            <p>3</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Air War
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=3985818.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song4">
                        <div class="num">
                            <p>4</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Untrust Us
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=3985834.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>5</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Magic Spells
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=3985813.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>6</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Not In Love
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=17159482.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>7</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Reckless
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=1400069743.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>8</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Black Panther
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=1400069744.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>9</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Transgender
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=27142609.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>10</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Air War
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=27142609.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-left">
                <img src="./img/2.jpg" alt="">
            </div>
            <div class="bottom-middle">
                <span class="name">Name:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span class="singer">Singer:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <audio id="audio" src="" controls></audio></div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>

</html>

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 {
    /* position: absolute; */
    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-songname p {
    position: absolute;
    width: 100%;
    height: 3rem;
    font-size: 1.2rem;
    bottom: 0;
} */

.song-songsinger {
    width: 100%;
    /* padding-top: 2rem; */
}

.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;
    /* z-index: 100; */
    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%;
    /* display: flex; */
}

.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