基于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的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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 inc文件使用的风险和注意事项
2013/11/12 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
Javascript开发包大全整理
2006/12/22 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python匿名函数的使用方法解析
2019/10/10 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
深圳茁壮笔试题
2015/05/28 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
房产委托公证书样本
2014/04/04 职场文书
人事任命书格式
2014/06/05 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
领导欢迎词范文
2015/01/26 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
php中pcntl_fork详解
2021/04/01 PHP
小程序实现侧滑删除功能
2022/06/25 Javascript