基于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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 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
Yii扩展组件编写方法实例分析
2015/06/29 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
理解AngularJs指令
2015/12/10 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Django框架视图函数设计示例
2019/07/29 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
小学生常见病防治方案
2014/06/06 职场文书
志愿者宣传口号
2014/06/17 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
刑事上诉状范文
2015/05/22 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
MySQL RC事务隔离的实现
2022/03/31 MySQL