基于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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
js 浏览器事件介绍
Mar 30 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 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链接MySQL的常用扩展函数
2014/10/23 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
php无限极分类实现方法分析
2019/07/04 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
javascript常用对话框小集
2013/09/13 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python单元和文档测试实例详解
2019/04/11 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python项目打包成二进制的方法
2020/12/30 Python
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
美术学专业求职信
2014/07/23 职场文书
个人存款证明书
2014/10/18 职场文书
nginx日志格式分析和修改
2022/04/28 Servers
python中 Flask Web 表单的使用方法
2022/05/20 Python