H5Audio音频案例

news/2024/11/19 9:30:21/

效果图: 

代码:

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上自动播放无效,需要用户触发一下,也就是加点击事件触发;


http://www.ppmy.cn/news/161782.html

相关文章

HTML之H5

HTML之H5

一、新增标签 1、网页结构语义化标签&#xff08;8个&#xff09;&#xff1a; header&#xff0c;用于展示介绍性内容或是辅助导航 nav&#xff0c;网页导航栏 section&#xff0c;类似于一篇文章独立的章节&#xff0c;是article的一部分&#xff08;个人理解&#xf…
阅读更多...
微信H5支付（V3）

微信H5支付（V3）

最近在做一个涉及支付的项目&#xff0c;其中对支付模块的内容涉及的比较多&#xff0c;记录一点心得。如果有错误&#xff0c;希望各位大佬斧正。 这个支付项目涉及H5端的微信支付、支付宝支付、建行支付、会员卡充值&#xff08;现金&#xff09;等四部分内容。我将在下面的…
阅读更多...
微信支付之H5支付

微信支付之H5支付

先看下H5支付的官方描述吧&#xff1a; H5支付是指商户在微信客户端外的移动端网页展示商品或服务&#xff0c;用户在前述页面确认使用微信支付时&#xff0c;商户发起本服务呼起微信客户端进行支付。 主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器…
阅读更多...
微信H5支付概述

微信H5支付概述

最近有项目接入微信H5支付&#xff0c;所以在这里大概总结下。 首先&#xff0c;需要微信公众号是服务认证号&#xff0c;然后申请开通微信H5支付【微信H5支付申请由原来的微信公众号平台迁移到商户平台&#xff0c;需要在商户平台申请开通】&#xff0c;开通后会收到邮件&…
阅读更多...
web：H5和小程序的区别

web：H5和小程序的区别

web&#xff1a;H5和小程序的区别 H5和小程序的区别 H5和小程序不具备可比性&#xff0c;只是很多移动端的场景下&#xff0c;两种选择都能实现产品的大部分功能。最近几年&#xff0c;小程序的兴起&#xff0c;让人们理解他等同于H5&#xff0c;其实不然。 关于小程序与H5&…
阅读更多...
微信公众号h5页面支付(MWEB)

微信公众号h5页面支付(MWEB)

/*** 官微-分期支付接口(h5页面支付)** param request* param response*/SuppressWarnings("unchecked")ResponseBodyRequestMapping(value "/wxWapPrePayH5", method RequestMethod.POST)public Map<String, Object> wxWapPrePayH5(HttpServletRe…
阅读更多...
H5是什么？

H5是什么？

自从从事于前端开发之后&#xff0c;总有朋友问我是做什么的&#xff0c;通俗的说&#xff0c;做H5的&#xff0c;然后闲时&#xff0c;坐车&#xff0c;吃饭&#xff0c;聚会&#xff0c;总会聊到工作&#xff0c;恩&#xff0c;h5&#xff0c;对方一脸懵逼的时候&#xff0c;…
阅读更多...
H5微信公众号开发，微信支付

H5微信公众号开发，微信支付

&#xff08;如需完整代码,开发遇到什么问题&#xff0c;可与本人联系&#xff0c;代码给大家下载并帮你解决问题&#xff0c;微信号&#xff1a;1131237188&#xff09; 1.公众号开发&#xff0c;首先需要微信公众号的appId,secret 相当于账号密码 2.到公众号后台配置域名&a…
阅读更多...
最新文章

Copyright @ 2022~2023