页面代码:
<html> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!--media=print 这个属性可以在打印时有效--> <title>音频播放</title> <style type="text/css"> .audio-wrapper { background-color: #fcfcfc; margin: 10px auto; max-width: 670px; height: 70px; border: 1px solid #e0e0e0; } .audio-left { float: left; text-align: center; width: 18%; height: 100%; } .audio-left img { width: 40px; position: relative; top: 15px; margin: 0; display: initial; /* 解除与app的样式冲突 */ cursor: pointer; } .audio-right { margin-right: 2%; float: right; width: 80%; height: 100%; } .audio-right p { font-size: 15px; /*height: 35%;*/ height: 20%; margin: 8px 0; /* 歌曲名称只显示在一行,超出部分显示为省略号 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 243px; /* 要适配小屏幕手机,所以最大宽度先设小一点,后面js根据屏幕大小重新设置 */ } .progress-bar-bg { background-color: #d9d9d9; position: relative; height: 2px; cursor: pointer; } .progress-bar { background-color: #649fec; width: 0; height: 2px; } .progress-bar-bg span { content: " "; width: 10px; height: 10px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background-color: #3e87e8; position: absolute; left: 0; top: 50%; margin-top: -5px; margin-left: -5px; cursor: pointer; } .audio-time { overflow: hidden; margin-top: -1px; } .audio-length-total { float: right; font-size: 12px; margin-top: 5px; } .audio-length-current { float: left; font-size: 12px; margin-top: 5px; } </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="audio-wrapper"> <audio> <source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mp3"> </audio> <div class="audio-left"><img id="audioPlayer" src="play.png" /></div> <div class="audio-right"> <p style="max-width: 536px;"><!--Beta-B_Kan R. Gao.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">01:06</span></div> </div> </div> <script type="text/javascript"> $(document).ready(function () { // 控制音频文件名显示宽度 var maxW = $('.audio-right').width(); $('.audio-right p').css({ "max-width": maxW }); initAudioEvent(); }); /** * 初始化音频控制事件 */ function initAudioEvent() { var audio = $('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', 'pause.png'); } else { audio.pause(); $('#audioPlayer').attr('src', 'play.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); } }); var dot = document.getElementById('progressDot'); // 鼠标拖动进度点时可以调节进度 // 只有音乐开始播放后才可以调节,已经播放过但暂停了的也可以 // 鼠标按下时 dot.onmousedown = function (e) { if (!audio.paused || audio.currentTime != 0) { var oriLeft = dot.offsetLeft; var mouseX = e.clientX; var maxLeft = oriLeft; // 向左最大可拖动距离 var maxRight = document.getElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最大可拖动距离 // 禁止默认的选中事件(避免鼠标拖拽进度点的时候选中文字) if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } // 禁止事件冒泡 if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } // 开始拖动 document.onmousemove = function (e) { var length = e.clientX - mouseX; if (length > maxRight) { length = maxRight; } else if (length < -maxLeft) { length = -maxLeft; } var pgsWidth = $('.progress-bar-bg').width(); var rate = (oriLeft + length) / pgsWidth; audio.currentTime = audio.duration * rate; updateProgress(audio); }; // 拖动结束 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; } }; } /** * 更新进度条与当前播放时间 * @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); $('#audioPlayer').attr('src', 'play.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> </body> </html>
相关图片:
pause.png
play.png
标签:function,播放,音频,value,width,Html,var,audio From: https://www.cnblogs.com/wsk198726/p/17086125.html