js实现音乐播放器的方法-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

成都网站设计、成都网站建设、外贸网站建设的开发，更需要了解用户，从用户角度来建设网站，获得较好的用户体验。创新互联公司多年互联网经验，见的多，沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司，打造的就是网站建设产品直销的概念。选择创新互联公司，不只是建站，我们把建站作为产品，不断的更新、完善，让每位来访用户感受到浩方产品的价值服务。

这篇文章主要介绍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
 }
 a {
   text-align:center
 }
 
 </style>
</head>
<body>
 <div class="music-all">
 <audio class='music-audio' controls>
  <source src="http://www.jq22.com/demo/jqueryaudio201903252328/jq22.mp3" type="audio/mpeg">
 </audio>
 <div>总时间 
  <span class='music-max'></span>
 </div>
 <div>时间 
  <span class='music-cur'></span>
 </div>
 <input class='music-range' type="range" min=0 max=100 value=0 />
 <div>音量<span class="music-voice">1</span></div>
 <button class='music-play'>播放</button>
 <button class='music-no'>停止</button>
 <button class="music-btnd">声小</button>
 <button class="music-btne">声大</button>
 <div class="music-animation"><span class="music-span"></span></div>
 
 <div class="music-list"></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;
  $('.music-max').html(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");
})
 
 
audios.onended = function () {
  $(".music-animation").removeClass("play-an")
};
$('.music-btnd').click(function () {
  vol = vol > 0 &#63; (vol * 10 - 1) / 10 : 0;
  audios.volume = vol;
  console.log(vol)
  $(".music-voice").html(vol)
})
$('.music-btne').click(function () {
  vol = vol < 1 &#63; (vol * 10 + 1) / 10 : 1;
  audios.volume = vol;
  console.log(vol)
  $(".music-voice").html(vol)
})
$(".music-range").on('change', function () {
  audios.currentTime = this.value;
  console.log(this.value)
  $(".music-range").val(this.value);
});
 
function timeleng(time) {
  var m = 0,
    s = 0,
    ms = '00',
    ss = '00';
  time = Math.floor(time % 3600);
  m = Math.floor(time / 60);
  s = Math.floor(time % 60);
  ss = s < 10 &#63; '0' + s : s + '';
  ms = m < 10 &#63; '0' + m : m + '';
  return ms + ":" + ss;
}
$(".music-qd").on("click", function () {
  var nameid = $(".input-text").val();
  console.log(nameid)
  $.ajax({
    type: "get",
    dataType: 'jsonp',
    success: function (d) {
      console.log(d)
    },
    error: function (d) {
      console.log(d);
    }
  });
})
 </script>
</body>
</html>

本文标题：js实现音乐播放器的方法-创新互联
文章网址：https://www.cdcxhl.com/article38/ieesp.html

成都网站建设公司_创新互联，为您提供网站设计、品牌网站设计、网站维护、App开发、域名注册、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容