[微信音频播放器] html5 audio 制作的微信播放器
.audio-player {
width:100%;
background-color: f2f2f2;
padding:10px;
box-sizing: border-box;
}
.audio-player .audio-info {
font-size:14px;
color: 666;
margin-bottom:5px;
}
.audio-player .audio-controls {
display: flex;
align-items: center;
justify-content: space-between;
}
.audio-player .audio-controls button {
background-color: 007bff;
color: fff;
border: none;
padding:5px10px;
cursor: pointer;
border-radius:3px;
}
.audio-player .audio-controls button:hover {
background-color: 0056b3;
}
歌曲名
歌手
var audio = document.querySelector('.audio');
var playBtn = document.querySelector('.play-btn');
playBtn.addEventListener('click', function(){
if(audio.paused){
audio.play();
playBtn.innerText = '暂停';
} else {
audio.pause();
playBtn.innerText = '播放';
}
});
audio.addEventListener('ended', function(){
playBtn.innerText = '播放';
});
使用上述代码可以快速实现一个简单的微信样式音频播放器。通过HTML创建了一个包含音频信息和控制按钮的播放器容器,使用CSS样式美化了播放器的外观。在JavaScript代码中,通过操作音频元素和控制按钮实现了播放和暂停功能,并且监听了音频播放完成的事件,当音频播放完成时,切换控制按钮的文本。
该播放器具有以下特点:
- 简洁明了的界面,符合微信风格- 支持播放和暂停功能- 支持播放完成后自动切换控制按钮状态如果您希望更进一步的定制化,可以根据自己的需求进行调整。比如添加进度条、音量控制、歌词展示等功能。下面是一个稍微复杂一点的示例代码:
```html
/* 省略样式代码 */
.audio-progress {
width:100%;
height:5px;
background-color: ccc;
margin:5px0;
position: relative;
}
.audio-progress .current-progress {
height:100%;
background-color: 007bff;
position: absolute;
top:0;
left:0;
}
歌曲名
歌手
var audio = document.querySelector('.audio');
var playBtn = document.querySelector('.play-btn');
var progress = document.querySelector('.current-progress');
var progressContainer = document.querySelector('.audio-progress');
playBtn.addEventListener('click', function(){
if(audio.paused){
audio.play();
playBtn.innerText = '暂停';
} else {
audio.pause();
playBtn.innerText = '播放';
}
});
audio.addEventListener('timeupdate', function(){
var currentTime = audio.currentTime;
var duration = audio.duration;
var progressWidth = (currentTime / duration) *100;
progress.style.width = progressWidth + '%';
});
audio.addEventListener('ended', function(){
playBtn.innerText = '播放';
progress.style.width = '0';
});
progressContainer.addEventListener('click', function(e){
var clickX = e.offsetX;
var containerWidth = progressContainer.clientWidth;
var clickPercentage = (clickX / containerWidth) *100;
var audioDuration = audio.duration;
audio.currentTime = (clickPercentage /100) * audioDuration;
});
```
在这个示例中,我们增加了进度条元素和事件监听,实时更新音频播放进度,并且允许用户点击进度条跳转到指定位置。这个示例比之前的简单示例更加完整,功能更加丰富。
如果您有更多的定制需求,也可以通过JavaScript添加音量控制、播放模式切换、歌词滚动等功能。总的来说,通过HTML5的audio元素和一些简单的DOM操作,结合微信样式的CSS,我们可以快速实现一个体验良好的微信音频播放器。希望对您有所帮助。