css3 语音播放器

CSS3 语音播放器

/* 设置音频样式 */ .audio-player {
    width: 300px;
    height: 50px;
    background-color: #eee;
    border-radius: 25px;
    position: relative;
    padding: 5px;
 }
/* 设置播放按钮样式 */ .audio-player .play-btn {
    width: 30px;
    height: 30px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    cursor: pointer;
 }
/* 设置音频名称样式 */ .audio-player .audio-name {
    font-size: 16px;
    font-weight: bold;
    margin-left: 50px;
 }
/* 设置时间样式 */ .audio-player .time {
    font-size: 14px;
    position: absolute;
    bottom: 5px;
    right: 5px;
 }
/* 设置进度条样式 */ .audio-player .progress-bar {
    width: 200px;
    height: 5px;
    background-color: #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }
/* 设置进度条进度样式 */ .audio-player .progress {
    width: 0%;
    height: 5px;
    background-color: #333;
    border-radius: 5px;
 }
/* 设置静音按钮样式 */ .audio-player .mute-btn {
    width: 30px;
    height: 30px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
 }
/* 设置音量条样式 */ .audio-player .volume-bar {
    width: 100px;
    height: 5px;
    background-color: #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
 }
/* 设置音量条进度样式 */ .audio-player .volume {
    width: 0%;
    height: 5px;
    background-color: #333;
    border-radius: 5px;
 }
/* 隐藏音频控制面板 */ audio::-webkit-media-controls-panel {
    display: none!important;
 }
    

CSS3 语音播放器是一款基于CSS3实现的可定制化语音播放器，用户可以根据自己的需求，调整音频控件的样式和功能。这款语音播放器可以自主控制音量、进度条等，同时支持播放、暂停、重放等功能的实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！