1. H5自定义音频播放的需求
现在做网站都会碰到在网页里插音乐和改样式这种事儿。那个老旧的audio标签虽然功能挺给力，但样式嘛就有点跟不上新时代了。所以，我们要用H5搞个自定义音频播放器，让它看起来更适合咱们自己的网页设计。
搞定音乐播放器，咱们平时就是用HTML、CSS和JavaScript这三种技术。先用HTML标签把要听的音频文件插好，然后靠CSS给播放器搞个好看的样子，最后再用JavaScript搞定播放的开关、进度啊什么的，不就好了吗？这么一弄，自有一套个性十足的音乐播放器上线，让页面看起来更棒！
2.自定义音频播放器的基本实现
首先，在HTML中插入音频文件的代码如下：
html
然后，在CSS中美化音频播放器的样式：
css
#myAudio {
width: 100%;
background-color:#f2f2f2;
border-radius: 5px;
}
接着，在JavaScript中控制音频的播放、暂停等功能：
javascript
我们找到了那个名叫”myAudio”的音频元素，就放在这文档里。
function playAudio(){
audio.play();
function pauseAudio(){
audio.pause();
/* 进度条 */
.range {
width: 5.875rem;
height: 0.15rem;
background: #2386e4;
border-radius: 0.25rem;
-webkit-appearance: none !important;
position: absolute;
top: 3.55rem;
left: 6rem;
}
/* 进度滑块 */
.range::-webkit-slider-thumb {
width: 0.5rem;
height: 0.5rem;
background: #fff;
border: 1px solid #f18900;
cursor: pointer;
border-radius: 0.25rem;
-webkit-appearance: none !important;
}
搞定上面这些基础代码后，咱们就有了一款简单的自制音乐播放器！但别急，用起来你可能会发现一点儿小问题，比如说当我们拉进度条的时候，说不定会遇到点儿故障。那么这回，我们就来细细聊聊怎么解决这种问题。
3.拖动进度条导致播放不准确的问题
你知道吗？手机上看视频的时候，那个进度条有点儿奇怪，音乐的总时间不准！其实，这个问题是因为手机和电脑对音乐的计算方式不太一样。经过测试发现，原来是因为我们上传的歌曲被压缩过。所以在手机上看到的总时间跟原始歌长度就有出入，也就影响到了看视频时快进或者后退的准确性咯。
4.压缩对音频总时长的影响
压缩主要就是为了让文件变小点、打开快一些。不过，处理音视频文件时得小心压缩会不会影响总时间。因为压缩方式有好多种，所以手机上显示的持续时间很可能跟原本有点误差。这样的话，你拖着进度条想跳到哪里听哪里，结果却不是那么准。
5.解决方案：保证压缩后获取正常duration
为了解决这个问题，我们可以采取以下方法：
-在压缩音量的时候，挑个好点儿的压缩方法和设置，这样能少影响到整个声音的时长。
试试别的格式和工具来压视频，这样手机上看起来就正常了。
码了啥就留啥记录，以后想看就能找回来。
这样弄就能让我们在压缩了音乐之后，不管是在手机还是什么地方，都能得到差不多准确的duration值，从而就不用担心因为拉进度条而不小心跑调！
6.寻找既可压缩又能保持正常duration的方法
//将秒数转为00:00格式
function timeToStr(time) {
var m = 0,
s = 0,
_m = '00',
_s = '00';
time = Math.floor(time % 3600);
m = Math.floor(time / 60);
s = Math.floor(time % 60);
_s = s < 10 ? '0' + s : s + '';
_m = m < 10 ? '0' + m : m + '';
return _m + ":" + _s;
}
//触发播放事件
$('.play').on('click',function(){
var audio=document.getElementById('ao');
audio.play();
setInterval(function(){
var t=parseInt(audio.currentTime);
$(".range").attr({'max':751});
$('.max').html(timeToStr(751));
$(".range").val(t);
$('.cur').text(timeToStr(t));
},1000);
});
//监听滑块，可以拖动
$(".range").on('change',function(){
document.getElementById('ao').currentTime=this.value;$(".range").val(this.value);
});
想找个既能压音频又能用手机看duration时间的办法？那就试试这些方法！
-用专门的音频编辑软件，把声音搞得更合我们口味，调整压缩参数到最棒为止。
-试试各种压缩和编码方法，找个效果最好又适用于各个平台的。
咱们看看最新的科技资料和技术文案，瞅瞅它们在音效处理上有啥好办法和改良之处。
多试试看，学一学，我觉得肯定能找出既能压缩要求又能保证时长不变的好办法。
7.总结与展望
看这篇文章就知道！我们聊聊在手机上用H5定制音频播放器时怎么解决拖动进度条不能准确播放和如何找个办法既压缩文件大小还能让时长照常不变的小技巧~
科技进步这么快，以后肯定能有更好的办法。希望大家都能发掘出更多H5自定义音频的好点子！加油，开发者们！
原文链接：https://www.icz.com/technicalinformation/web/2024/04/14205.html，转载请注明出处~~~ 
评论0