关于#html5#的问题：音乐播放器


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .p {
                border-style: solid;
                width: 40rem;
                height: 40rem;
                border-radius: 50%;
                border-color: #999999;
                border-width: 0.625rem;
                background-color: black;
                justify-content: center;
                align-items: center;
                display: flex;
            }

            .container {
                margin: 0 auto;
                width: 360px;
                border-radius: 20px;
                padding-top: 10px;
                text-align: center;
                background: #fff
            }

            .container .item {
                padding-left: 100px;
                background: #504d58 url(img/409256676536179.png) no-repeat 70px center;
                line-height: inherit;
                border-bottom: 2px solid #fff;
                line-height: 50px;
                color: #fff;
                text-align: left
            }

            .container .item:last-of-type {
                border-bottom: 0;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
            }
        </style>
    </head>
    <body>
        <div class="p">
            <div class="container">
                <img src="img/95465667653616.jpg" /><br />
                <img src="img/05174667653616-2.jpg" />
                <div class="item">
                    我和我的祖国
                </div>
                <div class="item">
                    团结就是力量
                </div>
                <div class="item">
                    让我们荡起双桨
                </div>
                <div class="item">
                    在希望的田野上
                </div>
                <div class="item">
                    唱支山歌给党听
                </div>
            </div>
        </div>
    </body>
</html>

img


这是我用以下素材编辑出来的音乐排行榜，想请各位专家帮忙做一个音乐播放器放在音乐排行榜下面，当点击音乐排行榜上面对应的歌曲文字的时候会播放对应的音乐，重要的是不要跳转到别的页面，要直接播放，如果音乐播放器不是很好做的话，也可以不做音乐播放器，只需要当点击对应音乐名字的时候，不跳转别的页面直接播放，如果可以的话帮忙美化一下整个页面细节，谢谢

img

img

img

你题目的解答代码如下：

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .p {
                border-style: solid;
                width: 40rem;
                height: 40rem;
                border-radius: 50%;
                border-color: #999999;
                border-width: 0.625rem;
                background-color: black;
                justify-content: center;
                align-items: center;
                display: flex;
            }
            .container {
                margin: 0 auto;
                width: 360px;
                border-radius: 20px;
                padding-top: 10px;
                text-align: center;
                background: #fff
            }
            .container .item {
                padding-left: 100px;
                background: #504d58 url(img/409256676536179.png) no-repeat 70px center;
                line-height: inherit;
                border-bottom: 2px solid #fff;
                line-height: 50px;
                color: #fff;
                text-align: left
            }
            .container .item:last-of-type {
                border-bottom: 0;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
            }
        </style>
    </head>
    <body>
        <div class="p">
            <div class="container">
                <img src="img/95465667653616.jpg" /><br />
                <img src="img/05174667653616-2.jpg" />
                <div class="item" onclick="play('我和我的祖国.mp3')">
                    我和我的祖国
                </div>
                <div class="item" onclick="play('团结就是力量.mp3')">
                    团结就是力量
                </div>
                <div class="item" onclick="play('让我们荡起双桨.mp3')">
                    让我们荡起双桨
                </div>
                <div class="item" onclick="play('在希望的田野上.mp3')">
                    在希望的田野上
                </div>
                <div class="item" onclick="play('唱支山歌给党听.mp3')">
                    唱支山歌给党听
                </div>
            </div>
        </div>
        <audio src="" controls="controls" id="audio">你的浏览器不支持audio标签</audio>
        <script type="text/javascript">
        function play(url) {
            var audio = document.getElementById("audio");
            audio.src = url;
            audio.play();
        }
        </script>

    </body>
</html>

如有帮助，望采纳！谢谢!

会Vue吗,会Vue有源码
https://github.com/Binaryify/NeteaseCloudMusicApi