相思资源网 Design By www.200059.com
现效果如下:
由于我这边不需要其他按钮,就没写
数据是由后台提供,在这做了个小列子
后台代码
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="/UploadFiles/2021-04-02/musicPlayer.js">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实现简单的音频播放功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
标签:
js,实现音频播放
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无基于JavaScript实现简单的音频播放功能的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。