基于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 相关文章推荐
JQuery live函数
Dec 24 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
实现树状结构的两种方法
2006/10/09 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
对python周期性定时器的示例详解
2019/02/19 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
jupyter 添加不同内核的操作
2021/02/06 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
快餐公司创业计划书
2014/04/29 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
党员自我对照检查材料
2014/08/19 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
合作意向书范本
2019/04/17 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
SQLServer中exists和except用法介绍
2021/12/04 SQL Server