⭐️ 原生 Audio 样式简直丑到爆！重写！


> 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放卡片</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abcdefg..." crossorigin="anonymous">
    <style>
        /* 样式开始 */
        .card {
            background-color: #282828; /* 卡片背景色 */
            border-radius: 10px; /* 边框圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            overflow: hidden;
            width: 200px; /* 卡片宽度 */
            height: 200px; /* 卡片高度 */
            margin: 20px auto; /* 外边距，使卡片居中 */
            position: relative;
        }
        
        .album-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片填充方式 */
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0%; /* 覆盖层高度 */
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* 渐变遮罩层 */
            z-index: 1; /* 叠放顺序 */
            pointer-events: none; /* 不接受鼠标事件 */
        }
        
        .controls {
            position: absolute;
            bottom: 3px; /* 按钮距底部距离 */
            right: 10px; /* 按钮距右侧距离 */
            z-index: 2; /* 叠放顺序 */
        }
        
        button {
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 20px;
            color: #fff;
            transition: color 0.3s ease;
            width: 40px; 
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        button:hover {
            color: #ff4a4a;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%; 
        }
        
        .song-details {
            position: absolute;
            bottom: 13px; /* 文本距底部距离 */
            left: -20px; /* 文本距左侧距离 */
            right: 60px; /* 文本距右侧距离 */
            text-align: center;
            color: #fff; /* 文本颜色 */
            /* 添加文本阴影效果 */
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
        }
        
        .song-details p {
            width: 200px;
            margin: 0; /* 段落标签的边距 */
        }
        /* 样式结束 */
    </style>
</head>
<body>
    <div class="card">
        <div class="album-cover">
            <img src=" 图片地址 " alt="Album Cover">
        </div>
        <div class="overlay"></div>
        <div class="controls">
            <!-- 使用 Font Awesome 的播放图标 -->
            <button id="playPauseButton" class="fas fa-play"></button>
        </div>
        <div class="song-details">
            <p> 标题信息填写 </p>
        </div>
    </div>
    <script>
        // JavaScript代码开始
        let audio = new Audio(' 导入链接 ');
        let isPlaying = false;
        const playPauseButton = document.getElementById('playPauseButton');
        
        playPauseButton.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                playPauseButton.classList.remove('fa-pause');
                playPauseButton.classList.add('fa-play');
            } else {
                audio.play();
                playPauseButton.classList.remove('fa-play');
                playPauseButton.classList.add('fa-pause');
            }
            isPlaying = !isPlaying; // 更新播放状态
        });
        
        audio.addEventListener('ended', () => {
            isPlaying = false;
            playPauseButton.classList.remove('fa-pause');
            playPauseButton.classList.add('fa-play');
        });
        // JavaScript代码结束
    </script>
</body>
</html>

> 样式

音乐播放卡片
Album Cover

无寄  By：無.Flac

> 提示

网易云音乐外链：https://music.163.com/song/media/outer/url?id=xxxxxx.mp3