隔壁群友分享的音乐播放器代码

寻梦xunm| 1.1K+| 收集

1年前

超过386天温馨提示

本文最后更新于2024年03月13日，已超过386天没有更新，若内容或图片失效，请留言反馈。

下面就是隔壁群友分享的音乐代码，实测还是挺不错的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
    /*音乐*/
    :root{
        --textbs:rgb(255 255 255);/*白色字体颜色*/
    }

    @font-face {
      font-family: "iconfont"; /* Project id 3781624 */
      src: url('//at.alicdn.com/t/c/font_3781624_acf7eqdy5ke.woff2?t=1703660110630') format('woff2'),
           url('//at.alicdn.com/t/c/font_3781624_acf7eqdy5ke.woff?t=1703660110630') format('woff'),
           url('//at.alicdn.com/t/c/font_3781624_acf7eqdy5ke.ttf?t=1703660110630') format('truetype');
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-zanting:before {
      content: "\e60b";
    }
    
    .icon-jixu:before {
      content: "\e68b";
    }

    .music-play {
                width: 100%;
                height: 80px;
                position: relative;
                border-radius: 4px;
                margin-top: 7px;
                margin-bottom: 7px;
            }

    .music-play-conten {
        width: 70%;
        max-width: 85%;
        height: 100%;
        display: flex;
        align-items: center;
        /*background: rgb(226, 226, 226, 0.7);*/
        /*background-image: linear-gradient(88deg, #fff,rgb(226, 226, 226, 0.5));*/
        border-radius: 4px;
        transition:all 0.2s;
        position: relative;
        overflow: hidden;
        background: var(--imgbgy);
        /*filter: brightness(1);*/
    }

    .music-play-conten-left {
        width: 75px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        /*margin-left: 2px;*/
        z-index: 0;
    }

    .music-play-conten-left-bg {
        width: 100%;
        height: 100%;
        background-size: cover;
        border-radius: 4px 0px 0px 4px;
    }

    .music-play-conten-right {
        flex: 1;
        height: 100%;
        /* background: aquamarine; */
        /*border-radius: 4px;*/
        border-radius: 0 4px 4px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 0;
        
    }

    .music-play-conten-right-z {
        width: 80%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*z-index: 1;*/
    }

    .music-play-conten-right-z>span {
        margin-left: 10px;
        margin-right: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .conten-right-z-bt {
        font-size: 14px;
        /*color: #181818;*/
        color: var(--textbs);
        margin-bottom: 2px;
    }

    .conten-right-z-nr {
        font-size: 12px;
        /*color: #666;*/
        color: var(--textbs);
    }

    .music-play-conten-right-y {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /*z-index: 1;*/
    }

    .conten-right-y-tb {
        width: 21px;
        height: 21px;
        border-radius: 360px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 18px;
        /* background: #07c160; */
        /* background: rgb(0,0,0,0.15); */
        /*border: 1px solid #525252;
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);*/
        cursor: pointer;
    }

    .conten-right-y-tb>i {
        font-size: 20px;
        /*color: #525252;*/
        color: var(--textbs);
        pointer-events: none;
        
    }
    
 </style>
</head>
<body>
<?php

$friendMusic = '1958354765||dfdd||https://pic.ziyuan.wang/user/xunm/2024/02/2695743714_f01cda822aec1.jpg||半生';
if ($friendMusic) {
    $musicInfo = explode('||', $friendMusic);
    $musicId = isset($musicInfo[0]) ? trim($musicInfo[0]) : '';
    $musicAuthor = isset($musicInfo[1]) ? trim($musicInfo[1]) : '';
    $musicImage = isset($musicInfo[2]) ? trim($musicInfo[2]) : '';
    $musicName = isset($musicInfo[3]) ? trim($musicInfo[3]) : '';

    if (strpos($musicId, 'http') === 0) {
        $musicUrl = $musicId;
    } else {
        $musicUrl = '//music.163.com/song/media/outer/url?id=' . $musicId . '.mp3';
    }

    if ($musicId && $musicAuthor && $musicImage && $musicUrl && $musicName) {
        ?>
        <div class="music-play">
            <div class="music-play-conten">
                <img class="mimg" src="<?php echo $musicImage; ?>" alt="" style="width: 110%; height: 110%; position: absolute; pointer-events: none; filter: brightness(80%) saturate(150%) blur(10px); -webkit-filter: brightness(80%) saturate(150%) blur(10px); z-index: 0;">
                <div class="music-play-conten-left">
                    <div class="music-play-conten-left-bg" style="background-image: url(<?php echo $musicImage; ?>);"></div>
                </div>
                <div class="music-play-conten-right">
                    <div class="music-play-conten-right-z">
                        <span class="conten-right-z-bt"><?php echo $musicName; ?></span>
                        <span class="conten-right-z-nr"><?php echo $musicAuthor; ?></span>
                    </div>
                    <div class="music-play-conten-right-y">
                        <div class="conten-right-y-tb" lang="<?php echo $musicUrl; ?>" onclick="audbf('<?php echo $musicId; ?>')">
                            <i class="iconfont icon-jixu" id="sh-aud-left-plak-<?php echo $musicId; ?>" lang="0"></i>
                        </div>
                        <i id="musicurl-<?php echo $musicId; ?>" lang="<?php echo $musicUrl; ?>" class="<?php echo $musicImage; ?>" style="display: none;"></i>
                    </div>
                </div>
            </div>
        </div>
        <audio id="music-player-<?php echo $musicId; ?>" src="<?php echo $musicUrl; ?>" type="audio/mpeg"></audio>
        <?php
    }
}
?>
<script>
    var currentPlayingId = null;

    function audbf(musicId) {
        var audio = document.getElementById('music-player-' + musicId);
        var playButton = document.getElementById('sh-aud-left-plak-' + musicId);
        
        if (currentPlayingId !== null && currentPlayingId !== musicId) {
            var previousAudio = document.getElementById('music-player-' + currentPlayingId);
            var previousPlayButton = document.getElementById('sh-aud-left-plak-' + currentPlayingId);
            previousAudio.pause();
            previousPlayButton.setAttribute('class', 'iconfont icon-jixu');
        }

        if (audio.paused) {
            audio.play();
            playButton.setAttribute('class', 'iconfont icon-zanting');
            currentPlayingId = musicId;
        } else {
            audio.pause();
            playButton.setAttribute('class', 'iconfont icon-jixu');
            currentPlayingId = null;
        }
    }
</script>

</body>
</html>

css 教程 php html js 代码

本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

0 赞 or 打赏

喜欢就打赏一点

typecho PJAX评论区自定义“Token”问题

网易云音乐API文档

服务器服务器

妈的，累死累活才这点工资

107人气2天前

又要开始上夜班了，坚持还有十来天

131人气3天前

typecho简洁主题-采风

148人气4天前

最近忙，没得空更新

122人气8天前

又是被叼的一天

245人气16天前

Photoshop2025年全面核心技术训练教程

191人气18天前

zizdog

11个月前 . LV.0

很好。立刻省去一个插件，不错。当然，我的方案比这还简单粗暴：直接一个简单html标签并隐藏，再写一个能开始和暂时的东西就行。样式都省了。

OSX Safari 山西省
夏日博客

1年前 . LV.0

纯html代码，不错。

Windows Chrome 河北省邯郸市
1. 寻梦xunm 作者博主
  
  1年前 . 贵人 . LV.6
  
  @夏日博客
  额，也不是纯html
  
  Windows 火狐浏览器重庆市

服务器服务器

我的音乐