audio标签样式修改

效果展示

上代码
html:

<div class="audio-box"><audio id="audioTag" src="music/tonghuazhen.mp3"></audio><div class="a-progress"><span class="played-time" id="playedTime">00:00</span><div class="pgs-total"><div class="pgs-play" id="progress" style="width: 1%;"></div></div><span class="audio-time" id="audioTime">0</span></div><div class="a-controls"><button class="play-pause" id="playPause"><span class="icon-btn icon-play"></span></button><div id="skipForward" class="skip-ward s-right"></div><div id="skipBackward" class="skip-ward s-left"></div><div id="turnNext" class="turn-ward t-right"></div><div id="turnPrev" class="turn-ward t-left"></div></div>
</div>

css:

// 自定义语音样式
.audio-box {margin: 0 auto;position: fixed;bottom: 0;left: 0;right: 0;background-color: #ffffff;border-top: 1px solid #dddddd;
}
.a-progress {width: 100%;margin: 20px auto;position: relative;padding: 0 65px;color: #3fcccc;
}
.a-progress > span {width: 50px;position: absolute;top: -1px;
}
.a-progress .played-time {left: 15px;text-align: left;
}
.a-progress .audio-time {right: 15px;text-align: right;
}
.a-progress .pgs-total {width: 100%;height: 16px;background-color: transparent;border-radius: 10px;position: relative;
}
.a-progress .pgs-total:after {content: '';position: absolute;left: 0;right: 0;top: 7px;bottom: 7px;background-color: #bbbbbb;border-radius: 10px;z-index: -1;
}
.a-progress .pgs-total .pgs-play {height: 100%;position: relative;border-radius: 10px;
}
.a-progress .pgs-total .pgs-play:before {content: '';position: absolute;top: 7px;bottom: 7px;left: 0;right: 0;background-color: #3fcccc;border-radius: 10px;z-index: 1;
}
.a-progress .pgs-total .pgs-play:after {content: '';position: absolute;right: -8px;width: 16px;height: 16px;top: 50%;margin-top: -8px;background-color: #3fcccc;border-radius: 50%;z-index: 1;
}
.a-controls {width: 100%;padding: 0;position: relative;text-align: center;margin-bottom: 28px;
}
.a-controls .play-pause {border: 0;outline: 0;padding: 0;width: 65px;height: 65px;margin: 0 28px;
}
.a-controls .play-pause .icon-btn {display: inline-block;width: 100%;height: 100%;
}
.a-controls .play-pause .icon-play {background: url("../images/record-play.png");background-size: 100% 100%;
}
.a-controls .play-pause .icon-pause {background: url("../images/record-stop.png");background-size: 100% 100%;
}
.a-controls .skip-ward {width: 30px;height: 30px;position: absolute;top: 50%;margin-top: -15px;
}
.a-controls .s-left {left: 15px;background: url("../images/s-left.png");background-size: 100% 100%;
}
.a-controls .s-right {right: 15px;background: url("../images/s-right.png");background-size: 100% 100%;
}
.a-controls .turn-ward {width: 40px;height: 40px;position: absolute;top: 50%;margin-top: -20px;
}
.a-controls .t-left {left: 25%;margin-left: -20px;background: url("../images/t-left.png");background-size: 100% 100%;
}
.a-controls .t-right {right: 25%;margin-right: -20px;background: url("../images/t-right.png");background-size: 100% 100%;
}

获取音频对象

var audio = $('#audioTag').get(0);

播放暂停控制

$('#playPause').click(function () {audio.addEventListener('timeupdate', updateProgress, false); // 监听音频播放时间并更新进度条audio.addEventListener('ended', audioEnded, false); // 监听播放完成事件// 改变暂停/播放iconif (audio.paused) {audio.play();$('.icon-btn').removeClass('icon-play').addClass('icon-pause');} else {audio.pause();$('.icon-btn').removeClass('icon-pause').addClass('icon-play');}
})

添加进度调节控制事件

拖动进度条播放

// 读取视频长度,设置页面时长显示-loadedmetadata:指定视频/音频（audio/video）的元数据加载后触发
// audio.duration 获取音频的时长，单位为秒
$('#audioTag').on("loadedmetadata", function () {$('#audioTime').text(transTime(this.duration));$(document).on('touchend', '.pgs-total', function (e) {var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;var X = x < 0 ? 0 : x;var W = $(this).width();var place = X > W ? W : X;audio.currentTime = (place / W) * audio.duration;$(this).children().css({width: (place / W) * 100 + "%"});updateProgress();});
});

快进15秒

$('#skipForward').on('click', function (e) {skipWard(15);updateProgress();
});

后退15秒

$('#skipBackward').on('click', function (e) {skipWard(-15);updateProgress();
});

四、调用公用事件

// 转换音频时长显示function transTime(time) {var duration = parseInt(time);var minute = parseInt(duration / 60);var sec = duration % 60 + '';var isM0 = ':';if (minute == 0) {minute = '00';} else if (minute < 10) {minute = '0' + minute;}if (sec.length == 1) {sec = '0' + sec;}return minute + isM0 + sec}// 更新进度条function updateProgress() {var audio = document.getElementById('audioTag');var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);$('#progress').css('width', value * 1 + '%');$('#playedTime').html(transTime(audio.currentTime));}// 播放完成function audioEnded() {var audio = document.getElementById('audioTag');audio.currentTime = 0;audio.pause();$('#playPause>span').removeClass('icon-pause').addClass('icon-play');}// 快进快退function skipWard(value) {var audio = document.getElementById('audioTag');console.log(audio.currentTime, audio.duration)if (audio.currentTime + value >= audio.duration) {audio.currentTime = audio.duration;} else if (audio.currentTime + value <= 0) {audio.currentTime = 0;} else {audio.currentTime += value;}}

五、注意：
手机端和PC端存在不同，手机端刚加载页面的时候不会自动加载音频资源，所以获取不到音频的时长信息。
要想一加载页面就获取时长，可以通过启动播放再暂停的方式。

var audio = $('#audioTag').get(0);
audio.play(); // 移动端不自动加载音频，需要启动播放再暂停
audio.pause();

PC端不存在此问题。

audio标签样式修改相关推荐

完美解决audio自定义修改样式。完整demo，可直接复用copy。修改默认样式
这个是完整demo,可以复用.请把代码直接复制,打开页面查看效果更好.知识点在下方. <!DOCTYPE html> <html lang="en"> &l ...
html5 audio样式修改,html5audio美化 html5 audio 顺序播放
如何修改HTML5 audio 的样式写的时候不要用controls, 然后自己写div或者a标签,定义样式. 再用js捕获audio事件就可以了. 基本就是src pause暂停 load加载 p ...
file标签样式修改
1. 这是默认的file样式,无法修改,在网页中用它感觉非常不合群,大部分修改的办法就是把它隐藏,绝对定位一个文本框和一个按钮这是修改后的样式,之后修改样式就是分别修改文本框和按钮样式了,就非常简单 ...
html5 audio样式修改,HTML5中 audio的样式设置
直接在样式表中设置对应的样式: audio::-webkit-media-controls-panel audio::-webkit-media-controls-mute-button audio: ...
element tab选项卡标签样式
前言今天工作时有一个需求,大致是把elementUI的选项卡标签样式修改修改.起初是想直接重写element样式类,但是需求中还需对标签中的数字特殊处理,这种方式就行不通了.百度找了很久,终于在一个 ...
android 默认勾选权限_Android系统Framework定制默认值预置修改
1. 配置SELinux权限 SELinux(或SEAndroid)主要将app划分为三种类型(根据user不同,也有其他的domain类型): 1)untrusted_app 第三方app,没有an ...
如何修改软件识别android手机型号
今天看到QQ空间里别人发的心情下面显示发自手机iphone6,于是好奇QQ空间是如何识别手机型号的,经过百度发现.原来android手机System/build.prop文件可以实现修改手机型号的功能 ...
通过build.prop修改手机信息
本文以CM的build为例讲解如何修改这些参数 # begin build properties (开始设置系统性能) # autogenerated by buildinfo.sh (通过设置形成系 ...
Android系统修改汇总（MTK）
以下都是基于Android 6.0 的代码去修改的!!! 十四.将桌面workspace.hotseat 大小调整放大一半 , 这个要根据自己的需求来制定 workspace.setPadding ...

audio标签样式修改

audio标签样式修改相关推荐

最新文章

热门文章