web 制作简易音乐播放器，点击图片播放音乐

脆脆鲨不太脆

已于 2024-02-22 18:09:23 修改

阅读量1.2k

点赞数 2

于 2022-06-12 03:25:41 首次发布

本文链接：https://blog.csdn.net/m0_55801084/article/details/125241417

版权

HTML 音乐播放暂停功能 JavaScript 事件处理

关键词由CSDN通过智能技术生成

源码：

直接粘贴用就好，实现了暂停播放功能。

<!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>Document</title>
    <style>
        .yinyue{
            width: 30px;
            height: 30px;
            position: absolute;
            height: 30px;
            right: 20px;
        }
    </style>
</head>

<body>
    <body>
    <div id="yinyue">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAMAAAANmfvwAAAAh1BMVEUAAAD///8SIU79/v729/hFUHT6+/ze4ObR1N1ncY4dK1bs7vHo6e7X2eG5vsulq7yVnLCIkKZye5Y3RGoWJFH39/n19ffLztitssKCiqJ1fZhUX38+Sm8uO2MiMFoeLFen6EyhAAAADnRSTlMAQQPw6sy0nXI4IBMRCdXSR44AAAEISURBVDjLlZRpk4MgDIYDitWKoR6tvY+9r///+3anSAniTtp3hg9hHkJCEoBI6iLP0jTLCy1hSpVQeJMSVQRIgSOJkadyhpFmJSXmCU4omRMC/9GNKa2Phd3ult5IhrtkGIcxhsRjYxY4RrYkr+t7YIR8dt6snJNFgJjv0/5l2BQAUsVeLn/rNJxSEjTGyPZ1v1s7W0MxgQR2ATmH5JBxSAYph6T3IPxFQbh1t2njcEnS7eHc91+HKGn/dM8f5qqf/hgg2hfgzTgtKaGkL2PjiItFXBlJM7w7ZNUiUUVaatMMRE0JETRmfWzOzWoXDooctXe9fkIr397skPCjxg8sP/YPfB78F/QLNl8zkIlbT00AAAAASUVORK5CYII=" onclick="image()">
        <audio src="music/好运来.mp3" id="music"></audio>
    </div>
        <script>

        function image(){
        var yinyue=document.getElementById('music')
        if (yinyue.paused) {
           yinyue.play();
        }
        else{
            yinyue.pause();
        }
        }
        </script>
        </body>
</body>
</html>