杨明宇要开心 2021-11-23 15:48 采纳率: 75%
浏览 88
已结题

关于#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

  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2021-11-24 11:01
    关注

    你题目的解答代码如下：

     
<!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>

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 12月18日
  • 已采纳回答 12月10日
  • 创建了问题 11月23日

悬赏问题

  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？
  • ¥15 乘性高斯噪声在深度学习网络中的应用