audio 音频标签自定义样式修改以及添加播放控制事件

最新推荐文章于 2024-08-09 08:16:30 发布

qq_53694927

最新推荐文章于 2024-08-09 08:16:30 发布

阅读量1.3k

点赞数

文章标签：音视频 servlet html

本文链接：https://blog.csdn.net/qq_53694927/article/details/126921104

版权

本文介绍如何使用HTML、CSS和JavaScript实现自定义的音频播放器样式，并添加播放、暂停、进度控制等事件。通过CSS设置音频元素的外观，JavaScript监听并处理播放时间更新、播放结束等事件，实现进度条的实时更新和拖动调整播放位置的功能。

摘要由CSDN通过智能技术生成

html 代码

<div class="audio-wrapper">
<audio>
<source src="Files/Audio/2017-08/e259d760-5f1a-4ae0-a838-34d237ea93cc.mp3" type="audio/mp3">
</audio>
<div class="audio-left">![](image/play.png)</div>
<div class="audio-right">
<p style="max-width: 536px;">Beta-B_Kan R. Gao.mp3</p>
<div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total">01:06</span></div>
</div>
</div>

css 代码

.audio-wrapper {
background-color: #fcfcfc;
margin: 10px auto;
max-width: 670px;
height: 70px;
border: 1px solid #e0e0e0;
}

.audio-left {
float: left;
text-align: center;
width: 18%;
height: 100%;
}

.audio-left img {
width: 40px;
position: relative;
top: 15px;
margin: 0;
display: initial; /* 解除与app的样式冲突 */
cursor: pointer;
}

.audio-right {
margin-right: 2%;
float: right;
width: 80%;
height: 100%;
}

.audio-right p {
font-size: 15px;
height: 35%;
margin: 8px 0;

/* 歌曲名称只显示在一行，超出部分显示为省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 243px; /* 要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
}

.progress-bar-bg {
background-color: #d9d9