基于JavaScript实现简单的音频播放功能


Posted in Javascript onJanuary 07, 2018

现效果如下:

基于JavaScript实现简单的音频播放功能

由于我这边不需要其他按钮,就没写

数据是由后台提供,在这做了个小列子

后台代码

public ActionResult MusicPlayer(int musicId=0) {
   MusicPlayerModel model = new MusicPlayerModel();
   switch (musicId)
   {
    default:
     model.MusicName = "Believe-动画《海贼王》";
     model.CoverImg = "/Content/Music/Believe-cover.jpg";
     model.FileUrl = "/Content/Music/Believe.mp3";
     model.MusicStartSecond = 0;
     model.MusicEndSecond = 227;
     break;
    case 1:
     model.MusicName = "梦回还-动画《狐妖小红娘》";
     model.CoverImg = "/Content/Music/梦回还-cover.jpg";
     model.FileUrl = "/Content/Music/梦回还.mp3";
     model.MusicStartSecond = 0;
     model.MusicEndSecond = 250;
     break;
   }
   return View(model);
  }

页面代码

@using FunctionTest.Web.Areas.Function.Models;
@model MusicPlayerModel
@{
 ViewBag.Title = "MusicPlayer";
 Layout = "~/Areas/Function/Views/Shared/_FunctionLayout.cshtml";
}
<link href="~/Assets/Function/MusicPlayer/musicPlayer.css" rel="external nofollow" rel="stylesheet" />
<script src="~/Assets/Function/MusicPlayer/musicPlayer.js"></script>
<div class="img-wapper">
 <img src="@Model.CoverImg" />
</div>
<div id="player-wapper" class="player-wapper">
 <div class="cover-wapper">
  <img src="@Model.CoverImg" />
  <div class="play">
   <i></i>
  </div>
 </div>
 <div class="info-wapper">
  <div class="title">@Model.MusicName</div>
  <audio id="audio-player" src="@Model.FileUrl" data-src="@Model.FileUrl" data-start="@Model.MusicStartSecond" data-end="@Model.MusicEndSecond" ></audio>
  <div class="audio-progress">
   <span id="start-time" class="start-time">00:00</span>
   <div id="progress" class="progress">
    <span id="player-progress-bar" class="bar">
     <i></i>
    </span>
   </div>
   <span id="end-time" class="end-time">00:00</span>
  </div>
 </div>
</div>

Js

;$(function () {
 var $playerWapper = $("#player-wapper"),
  $audioPlay = $("#audio-player"),
  startSecond = $audioPlay.data("start"),//默认开始时间(秒)
  endSecond = $audioPlay.data("end"),//默认结束时间(秒)
  playSecond = startSecond,//已播放时间(秒)
  surplusSecond = endSecond,//剩余时间(秒)
  audoiTimer = null;
 LoadingTime();
 Playing();
 //通过点击进度条实现播放跳转
 $(".progress").click(function (e) {
  //获取当前鼠标相对进度条的X坐标
  var positionX = e.pageX - $(this).offset().left; 
  var width = $(this).width();
  //进度条的X坐标/进度条宽度获取播放占比
  var progess = (positionX / width).toFixed(2);
  $("#player-progress-bar").css("width", progess);
  //播放占比*总时间获取已播放时间
  playSecond = parseInt(progess * endSecond);
  surplusSecond = endSecond - playSecond;
  //播放器跳转/跟新播放时间
  $audioPlay[0].currentTime = playSecond;
  LoadingTime();
 })
 //播放按钮点击事件
 $(".play").click(function () {
  if ($playerWapper.hasClass("playing")) {
   Pause();
  }
  else {
   Playing();
  }
 })
 //开始/继续播放
 function Playing() {
  $playerWapper.addClass("playing");
  $playerWapper.removeClass("pause");
  $audioPlay[0].play();
  audoiTimer = setInterval(function () {
   playSecond++;
   surplusSecond--;
   LoadingTime();
   if (surplusSecond <= 0) {
    playSecond = startSecond;
    surplusSecond = endSecond;
    Pause();
   }
  }, 1000); //每个1秒执行一次
 }
 //暂停播放
 function Pause() {
  $playerWapper.removeClass("playing");
  $playerWapper.addClass("pause");
  window.clearInterval(audoiTimer);
  $audioPlay[0].pause();
 }
 //加载时间和进度条
 function LoadingTime() {
  $("#start-time").html(secondToTime(playSecond));
  $("#end-time").html(secondToTime(surplusSecond));
  $("#player-progress-bar").css("width", Percentage(playSecond, endSecond));
 }
 //计算百分比
 function Percentage(second1, second2) {
  return (Math.round(second1 / second2 * 10000) / 100+ "%");// 小数点后两位百分比
 }
 //时间转换,将秒转为00:00:00格式
 function secondToTime(s) {
  var t;
  if (s > -1) {
   var hour = Math.floor(s / 3600);
   var min = Math.floor(s / 60) % 60;
   var sec = s % 60;
   if (hour < 10) {
    t = '0' + hour + ":";
   } else {
    t = hour + ":";
   }
   if (min < 10) { t += "0"; }
   t += min + ":";
   if (sec < 10) { t += "0"; }
   t += sec;
  }
  return t;
 }
})

总结

以上所述是小编给大家介绍的基于JavaScript实现简单的音频播放功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript通过class来获取元素实现代码
Feb 20 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
js实现复制功能(多种方法集合)
Jan 06 #Javascript
tangram.js库实现js类的方式实例分析
Jan 06 #Javascript
JavaScript寄生组合式继承实例详解
Jan 06 #Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 #Javascript
jQuery中库的引用方法
Jan 06 #jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 #Javascript
You might like
PHP输出九九乘法表代码实例
2015/03/27 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
取选中的radio的值
2010/01/11 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
React中的refs的使用教程
2018/02/13 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
Python实现的远程登录windows系统功能示例
2018/06/21 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python 编程速成(推荐)
2019/04/15 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
经济信息系毕业生自荐信范文
2014/03/15 职场文书
影视广告专业求职信
2014/09/02 职场文书
党员自评材料范文
2014/12/17 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
病假证明模板
2015/06/19 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
初中物理教学反思
2016/02/19 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书