H5Audio音频案例
效果图:
代码:
html:
<div class="audio-wrapper clearfix">
<audio src="../images/en_01.mp3" loop="loop" id="audio">
</audio>
<div class="audio-left" id="audioPlayer">
<img class="apl" style="display: block;" src="../images/start.png" alt="">
<img class="apl_01" style="display: none;" src="../images/stop.png" alt="">
</div>
<div class="audio-right">
<p class="font_b">意外.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">00:00</span></div>
</div>
</div>
css:
注:1rem = 40px;
.audio-wrapper {
width: 15.45rem;
height: 3rem;
border: .05rem solid #c2d6e5;;
border-radius: 0.8rem;
background-color: #ffffff;
margin: 0 auto;
position: relative;
}
.audio-left {
width: 1.72rem;
height: 1.72rem;
text-align: center;
line-height: 1.72rem;
border-radius: 50%;
// border: 1px solid green;
position: absolute;
left: .85rem;
top: 50%;
margin-top: -1.72/2rem;
cursor: pointer;
overflow: hidden;
}
.audio-left img {
position: relative;
cursor: pointer;
}
.audio-right {
margin-right: 1rem;
float: right;
width: 11.3rem;
height: 100%;
position: relative;
overflow: hidden;
}
.audio-right p {
font-size: .7rem;
position: absolute;
left: 0;
top: .4rem;
color: #ec9400;
width: 11rem;
height: .75rem;
line-height: .75rem;
text-align: left;
}
.progress-bar-bg {
background-color: #d9d9d9;
position: relative;
height: 3/40rem;
cursor: pointer;
// margin-top: 100/2/40rem;
width: 11.3rem;
left: 0;
top: 50%;
margin-top: -3/40rem/2rem;
}
.progress-bar {
background-color: #38b438;
width: 0;
height: 2/40rem;
}
.progress-bar-bg span {
content: " ";
width: 14/40rem;
height: 14/40rem;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #38b438;
border: 2/40rem solid #9cd3b0;
position: absolute;
left: 0;
top: 50%;
margin-top: -8/40rem;
cursor: pointer;
}
.audio-time {
overflow: hidden;
width: 11.3rem;
height: .7rem;
line-height: .7rem;
text-align: center;
position: absolute;
left: 0rem;
bottom: .4rem;
font-size: 24/40rem;
color: #917771;
}
.audio-length-total {
float: right;
}
.audio-length-current {
float: left;
}
js:
--duration:音乐的总时间
--cerrentTime:音乐的当前时间
--canplaythrougn: 事件,监测音乐是否加载完毕
--ended:事件,音乐播放完毕触发该事件
--play: 音乐播放
--pause:音乐暂停
先引入jq:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=864){
docEl.style.fontSize = '40px';
}else{
docEl.style.fontSize = 40 * (clientWidth / 864) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
<script>
$(document).ready(function () {
// 控制音频文件名显示宽度
var maxW = $('.audio-right').width();
$('.audio-right p').css({
"max-width": maxW
});
// 可能会有多个音频,逐个初始化音频控制事件
initAudioEvent();
});
function initAudioEvent() {
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('timeupdate', function () {
var song_time = audio.duration;
console.log(song_time);
var song_time_all = transTime(song_time);
$('.audio-length-total').text(song_time_all);
updateProgress(audio);
}, false);
// 点击播放/暂停图片时,控制音乐的播放与暂停
$('#audioPlayer').click(function () {
console.log('333');
// 监听音频播放时间并更新进度条
audio.addEventListener('timeupdate', function () {
updateProgress(audio);
}, false);
// 监听播放完成事件
audio.addEventListener('ended', function () {
audioEnded();
}, false);
// 改变播放/暂停图片
if (audio.paused) {
// 开始播放当前点击的音频
audio.play();
$('.apl').hide();
$('.apl_01').show();
} else {
audio.pause();
$('.apl').show();
$('.apl_01').hide();
}
});
// 点击进度条跳到指定点播放
// 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));
}
/**
* 播放完成时把进度调回开始的位置
*/
function audioEnded() {
$('#progressBar').css('width', 0);
$('#progressDot').css('left', 0);
$('#audioCurTime').html(transTime(0));
$('.apl').hide();
$('.apl_01').show();
// $('#audioPlayer img')[0].attr('src', './images/start.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>
注: 如果在audio音频上加autoplay属性,安卓上是可以的,在ios上自动播放无效,需要用户触发一下,也就是加点击事件触发;
H5Audio音频案例相关推荐
- 【SVG案例库】SVG公众号排版交互图文案例汇总
随着交付项目数量逐渐增多,于是懂点君在交付的项目案例中挑选一些案例,按照SVG排版交互方式进行归类汇总,整理形成SVG案例库,方便大家定制开发和学习SVG交互排版. 单次展开 描述:点击下拉展开无缝长 ...
- 谷歌推Tacotron 2,搞定绕口令,效果优于WaveNet
安妮 编译整理 量子位 出品 | 公众号 QbitAI 让电脑会讲话没什么,但让电脑说得666就不是一件容易事了. 今天,谷歌推出一种直接从文本中合成语音的神经网络结构,即新型TTS(Text-to- ...
- Balanced Multimodal Learning via On-the-fly Gradient Modulation论文笔记
Balanced Multimodal Learning via On-the-fly Gradient Modulation论文笔记 引言 多输入模态有望提高模型性能,但我们实际上发现即使多模态模型 ...
- 把声音画出来,会长成什么样?——HMM模型实例展示语音识别全流程
一.项目简介 语音识别是人工智能领域的一个重要的应用场景,那么程序究竟是如何听懂语音的呢? 本文将用真实的音频案例,用代码呈现语音识别的基本原理和流程. 同时,将各种声音信号的MFCC矩阵进行可视化, ...
- 安卓多媒体API——Vitamio框架
之前学习了MediaPlayer https://blog.csdn.net/nishigesb123/article/details/89479084 但MediaPlayer支持的媒体格式其实是有 ...
- 将多个ts文件合并成一个mp4文件
Python目录操作: 创建目录 :os.mkdir(path) 判断目录存在:os.path.exists(path) 创建多层目录:os.makedirs(path) 删除文件:os.remove ...
- 安卓第二阶段实训预备案例:访问媒体库音频数据
文章目录 一.引入新课 (一)如何访问系统数据库数据? (二)安卓媒体库(MediaStore) 1.系统外置卡媒体数据库(external.db) 2.系统内置卡媒体数据库(internal.db) ...
- python喜马拉雅_Python爬虫实战案例:取喜马拉雅音频数据详解!
前言 喜马拉雅是专业的音频分享平台,汇集了有声小说,有声读物,有声书,FM电台,儿童睡前故事,相声小品,鬼故事等数亿条音频,我最喜欢听民间故事和德云社相声集,你呢? 今天带大家爬取喜马拉雅音频数据,一 ...
- Python爬虫实战案例:取喜马拉雅音频数据详解
前言 喜马拉雅是专业的音频分享平台,汇集了有声小说,有声读物,有声书,FM电台,儿童睡前故事,相声小品,鬼故事等数亿条音频,我最喜欢听民间故事和德云社相声集,你呢? 今天带大家爬取喜马拉雅音频数据,一 ...
最新文章
- asp.net .ashx文件使用server.mappath解决方法
- 第一次创业失败的总结 - 产品设计
- 上周热点回顾(10.1-10.7)
- ie php文件,IE(HTTPS):从php文件生成pdf不起作用
- java提取图片中的文字,深入分析
- autosar网络管理_AP AUTOSAR平台设计(11)——网络管理
- 9张图总结一下阿里云的2019
- 递归删除.svn文件夹以及文件
- Linux中的sed命令
- 关于加载表格及模态框数据回填的Bug
- python生活中的小问题_python日常注意小知识集锦
- micropython stm32f429_[MicroPython]STM32F407开发板控制BMP180测量气压
- 怎样卸载deepin系统_双系统卸载deepin的方法是什么_双系统完全卸载deepin的方法图文步骤...
- vue emoji编辑器
- matlab 取虚数单位,四元数解算姿态Matlab程序代码
- 看代码解读CenterNet :Objects as Points
- 手机里舍不得删除的48条搞笑短信
- 系统集成16真题解析
- MySQL 查看每个 IP 的连接数
- 用计算机弹出音乐谱,抖音计算器弹奏歌曲谱子是什么_抖音计算器音乐乐谱大全_管理资源吧...
热门文章
- centos8 通过dnf命令安装软件报Error: Failed to download metadata for repo ‘appstream‘ 解决办法
- 实验3 MCS-51内部定时/计数器实验(1)
- Tcp头部字段,与ip层关系,与udp区别,使用场景,Tcp状态
- vue全局自定义指令
- HyperX Cloud Buds Wireless云雀入耳式蓝牙无线游戏耳机推荐
- OpenStack Train版搭建详解
- rfid档案管理-基于RFID技术在智能档案柜管理中的应用—铨顺宏
- MQTT 通讯测试 linux端 Android app相互发送消息
- python kfold交叉验证_Scikit Learn-使用KFold交叉验证的决策树
- css——pre标签