💕 音频在线播放器
代码分享
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>音频在线播放器</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: sans-serif;
}
.player-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
}
audio {
width: 400px;
margin-top: 20px;
height: 32px;
}
/* ------------------------------------------------音乐颜色修改 5blog.cn--原创--------------------------------------- */
/* 播放/暂停按钮 */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button {
background-color: #FF0099;
border-radius: 50%;
}
/* 静音按钮 */
audio::-webkit-media-controls-mute-button {
background-color: red;
}
/* 全屏按钮（如果适用） */
audio::-webkit-media-controls-fullscreen-button {
background-color: red;
}
/* WebKit浏览器样式 (Chrome, Safari, Edge) */
audio::-webkit-media-controls-panel {
background-color: rgb(255 157 0 / 95%);
}
/* 时间显示 */
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
color: #000000;
font-family: Arial, sans-serif;
-background-color: #0bf1d5;
}
/* 进度条 */
audio::-webkit-media-controls-timeline {
background-color: #0bf1d5;
}
audio::-webkit-media-controls-progress-bar {
background-color: red;
}
/* 进度条滑块(小圆点) */
audio::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: red;
border-radius: 50%;
cursor: pointer;
}
/* 音量控制 */
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider {
filter: hue-rotate(-30deg) saturate(200%);
}
/* Firefox浏览器样式 */
audio {
--moz-range-track: #0bf1d5;
--moz-range-progress: red;
--moz-range-thumb: darkred;
}
</style>
</head>
<body>
<div class="player-container">
<h2>正在播放...</h2>
<p>如果未自动播放，请手动点击播放按钮。</p>
<!-- 关键：将您的地址放入 src 属性 -->
<audio id="myAudio" controls autoplay>
<source src="https://res.ctmus.cn/app_yunshang3.v1/mp3/2026/02/14/6/88/8c7ed85f-4080-43ba-a220-e1c41479ff4b.mp3" type="audio/mpeg">
您的浏览器不支持音频播放标签。
</audio>
<p>播放器已加载 <code>https://res.ctmus.cn/app_yunshang3.v1/mp3/2026/02/14/6/88/8c7ed85f-4080-43ba-a220-e1c41479ff4b.mp3</code></p>
</div>
<script>
// 处理自动播放可能被浏览器阻止的情况
document.getElementById('myAudio').play().catch(error => {
console.log('自动播放被阻止，用户需要手动交互。', error);
});
</script>
</body>
</html>
演示效果
阅读：32
发布时间：