如何弄微信小程序_js完成简略音乐播放器

js实现简单音乐播放器       这篇文章主要介绍了js实现简单音乐播放器，可拖动进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现音乐播放器的具体代码，供大家参考，具体内容如下

效果图：

可播放暂停继续播放，进度条可拖动，时间展示，声音调节

完整代码（直接拿来用）

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title audio功能开发 /title 
 style 
 margin:0;
 padding:0
 .music-range {
 width:350px;
 height:10px;
 background:#2386e4;
 border-radius:5px;
 -webkit-appearance:none;
 margin:0 auto;
 cursor:pointer
 .music-range::-webkit-slider-thumb {
 width:15px;
 height:15px;
 background:#fff;
 border:1px solid #f18900;
 cursor:pointer;
 border-radius:5px;
 -webkit-appearance:none
 text-align:center
 /style 
 /head 
 body 
 div 
 audio controls 
 source src="demo/jqueryaudio/jq22.mp3" type="audio/mpeg" 
 /audio 
 div 总时间 
 span /span 
 /div 
 div 时间 
 span /span 
 /div 
 input type="range" min=0 max=100 value=0 / 
 div 音量 span 1 /span /div 
 button 播放 /button 
 button 停止 /button 
 button 声小 /button 
 button 声大 /button 
 div span /span /div 
 div /div 
 /div 
 script src="js/jquery-1.10.2.js" /script 
 script src="js/audio.js" type="text/javascript" charset="utf-8" /script 
 script 
 var audios = document.getElementsByClassName("music-audio")[0];
var vol = audios.volume;
audios.controls = false;
$('.music-play').on('click', function () {
 audios.play();
 var duration = audios.duration;
 $('.(timeleng(duration));
 $(".music-animation").addClass("play-an");
 $(".music-range").attr({
 'max': duration
 function timer() {
 var t = parseInt(Math.round(audios.currentTime));
 $(".music-range").val(t);
 $('.music-cur').text(timeleng(t));
 t = parseInt(audios.currentTime);
 if (t duration) {
 setTimeout(timer, 1000);
 } else {
 clearTimeout(timer);
 timer();
$('.music-no').on('click', function () {
 audios.pause();
 $(".music-animation").removeClass("play-an");