h5或web页面 自定义audio样式
- 此处实例为H5移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义audio样式</title>
<style type="text/css">
.audio-wrapper {
background-color: #fcfcfc;
margin: 0.4rem auto;
width:6.9rem;
height:1.8rem;
background:rgba(244,244,244,1);
border-radius:0.16rem;
}
.audio-left {
float: left;
text-align: center;
width: 18%;
height: 100%;
}
.audio-left img {
width: 0.72rem;
position: relative;
top: 0.15rem;
margin: 0;
display: initial; /* 解除与app的样式冲突 */
cursor: pointer;
}
.audio-right {
margin-right: 2%;
float: right;
width: 80%;
height: 100%;
}
.audio-right p {
height: 35%;
margin: 0.08rem 0;
font-size:0.28rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;/* 歌曲名称只显示在一行，超出部分显示为省略号 */
color:rgba(51,51,51,1);
overflow: hidden;
line-height:0.4rem;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 2.43rem; /* 要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
}
.progress-bar-bg {
background-color: #d9d9d9;
position: relative;
height: 0.1rem;
cursor: pointer;
border-radius: 0.1rem;
}
.progress-bar {
background-color: #F5A623;
width: 0;
height: 0.1rem;
border-radius: 0.1rem;
}
.progress-bar-bg span {
content: " ";
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #F5A623;
position: absolute;
left: 0;
top: 50%;
margin-top: -0.05rem;
margin-left: -0.05rem;
cursor: pointer;
}
.audio-time {
overflow: hidden;
margin-top: 0.1rem;
}
.audio-length-total {
float: right;
font-size: 12px;
color: #494949;
}
.audio-length-current {
float: left;
font-size: 12px;
color: #494949;
}
</style>
</head>
<body>
<div class="audio-wrapper">
<audio>
<source src="../img/jiasudu.mp3" type="audio/mp3">
</audio>
<div class="audio-left"><img id="audioPlayer" src="../img/start_icon.png"></div>
<div class="audio-right">
<p style="max-width: 5.36rem;">不念过去 不畏将来</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">00:00</span></div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function () {
// 尺寸转换
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
// -------------------------------
// 控制音频文件名显示宽度
// var maxW = $('.audio-right').width();
// $('.audio-right p').css({
// "max-width": maxW
// });
// 可能会有多个音频，逐个初始化音频控制事件
initAudioEvent();
// $('.audio-length-total').text(transTime(audio.duration));
});
function initAudioEvent() {
var audio = document.getElementsByTagName('audio')[0];
// 点击播放/暂停图片时，控制音乐的播放与暂停
$('#audioPlayer').click(function () {
// 监听音频播放时间并更新进度条
audio.addEventListener('timeupdate', function () {
updateProgress(audio);
}, false);
// 监听播放完成事件
audio.addEventListener('ended', function () {
audioEnded();
}, false);
// 改变播放/暂停图片
if (audio.paused) {
// 开始播放当前点击的音频
audio.play();
$('#audioPlayer').attr('src', '../img/pause_icon.png'); // 暂停图标
} else {
audio.pause();
$('#audioPlayer').attr('src', '../img/start_icon.png'); // 播放图标
}
});
// 点击进度条跳到指定点播放
// PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
$('#progressBarBg').on('mousedown', function (e) {
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
if (!audio.paused || audio.currentTime != 0) {
var pgsWidth = $('.progress-bar-bg').width();
var rate = e.offsetX / pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress(audio);
}
});
dragProgressDotEvent(audio);
}
/**
* 鼠标拖动进度点时可以调节进度
* @param {*} audio
*/
function dragProgressDotEvent(audio) {
var dot = document.getElementById('progressDot');
var position = {
oriOffestLeft: 0, // 移动开始时进度条的点距离进度条的偏移值
oriX: 0, // 移动开始时的x坐标
maxLeft: 0, // 向左最大可拖动距离
maxRight: 0 // 向右最大可拖动距离
};
var flag = false; // 标记是否拖动开始
// 鼠标按下时
dot.addEventListener('mousedown', down, false);
dot.addEventListener('touchstart', down, false);
// 开始拖动
document.addEventListener('mousemove', move, false);
document.addEventListener('touchmove', move, false);
// 拖动结束
document.addEventListener('mouseup', end, false);
document.addEventListener('touchend', end, false);
function down(event) {
if (!audio.paused || audio.currentTime != 0) { // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
flag = true;
position.oriOffestLeft = dot.offsetLeft;
position.oriX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousedown和touchstart事件
position.maxLeft = position.oriOffestLeft; // 向左最大可拖动距离
position.maxRight = document.getElementById('progressBarBg').offsetWidth - position.oriOffestLeft; // 向右最大可拖动距离
// 禁止默认事件（避免鼠标拖拽进度点的时候选中文字）
if (event && event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
// 禁止事件冒泡
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
}
function move(event) {
if (flag) {
var clientX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousemove和touchmove事件
var length = clientX - position.oriX;
if (length > position.maxRight) {
length = position.maxRight;
} else if (length < -position.maxLeft) {
length = -position.maxLeft;
}
var pgsWidth = $('.progress-bar-bg').width();
var rate = (position.oriOffestLeft + length) / pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress(audio);
}
}
function end() {
flag = false;
}
}
/**
* 更新进度条与当前播放时间
* @param {object} audio - audio对象
*/
function updateProgress(audio) {
var value = audio.currentTime / audio.duration;
$('#progressBar').css('width', value * 100 + '%');
$('#progressDot').css('left', value * 100 + '%');
$('#audioCurTime').html(transTime(audio.currentTime));
$('.audio-length-total').text(transTime(audio.duration)); //点击播放显示音频全部时间
console.log(audio)
}
/**
* 播放完成时把进度调回开始的位置
*/
function audioEnded() {
$('#progressBar').css('width', 0);
$('#progressDot').css('left', 0);
$('#audioCurTime').html(transTime(0));
$('#audioPlayer').attr('src', '../img/start_icon.png');
}
/**
* 音频播放时间换算
* @param {number} value - 音频当前播放时间，单位秒
*/
function transTime(value) {
var time = "";
var h = parseInt(value / 3600);
value %= 3600;
var m = parseInt(value / 60);
var s = parseInt(value % 60);
if (h > 0) {
time = formatTime(h + ":" + m + ":" + s);
} else {
time = formatTime(m + ":" + s);
}
return time;
}
/**
* 格式化时间显示，补零对齐
* eg：2:4 --> 02:04
* @param {string} value - 形如 h:m:s 的字符串
*/
function formatTime(value) {
var time = "";
var s = value.split(':');
var i = 0;
for (; i < s.length - 1; i++) {
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
time += ":";
}
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
return time;
}
</script>
</html>
效果图如下：
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
