基于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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
jquery实现pager控件示例
Apr 09 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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 Curl多线程原理实例详解
2013/11/06 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP中的表达式简述
2016/05/29 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
js实现随机点名程序
2020/09/17 Javascript
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python datetime包函数简单介绍
2019/08/28 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python selenium操作cookie的实现
2020/03/18 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
数控专业推荐信范文
2013/12/02 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
安全生产感想
2015/08/07 职场文书