超过51天
温馨提示
本文最后更新于2024年03月13日，已超过51天没有更新，若内容或图片失效，请留言反馈。
下面就是隔壁群友分享的音乐代码，实测还是挺不错的。
<!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>
0 赞
or 打赏
喜欢就打赏一点
已有3 条评论，0 个点赞
zizdog
21天前 . LV.0
很好。立刻省去一个插件，不错。当然，我的方案比这还简单粗暴：直接一个简单html标签并隐藏，再写一个能开始和暂时的东西就行。样式都省了。
夏日博客
1个月前 . LV.0
纯html代码，不错。
寻梦xunm 作者博主
1个月前 . LV.0
@夏日博客
额，也不是纯html