基于Java脚本语言实现简单的音频播放功能

现效果如下：

由于我这边不需要其他按钮，就没写

数据是由后台提供，在这做了个小列子

后台代码

公开行动结果音乐播放器(int music id=0){音乐播放器型号=新音乐播放器型号()；开关(musicId) { default:型号。音乐名称='相信-动画《海贼王》 ';模特封面='/内容/音乐/自信-封面。jpg '；模特。文件网址='/内容/音乐/信仰。MP3 '；模特MusicStartSecond=0；模特MusicEndSecond=227打破；案例1:模型音乐名称='梦回还-动画《狐妖小红娘》 ';模特CoverImg='/内容/音乐/梦回还掩护。jpg '；模特。文件网址='/内容/音乐/梦回还。MP3 '；模特MusicStartSecond=0；模特音乐结束秒=250打破；}返回视图（模型);}页面代码

@使用功能测试.网络。区域。功能。模型；@ model MusicPlayerModel @ { view PAG .Title=' MusicPlayer布局=' ~/区域/功能/视图/共享/_功能布局。“cshtml”；}链接href=' ~/资产/功能/音乐播放器/音乐播放器。CSS“rel=”外部no跟随“rel=”样式表'/脚本src=' http : ~/Assets/Function/音乐播放器/音乐播放器。js '/script div class=' img-wapper ' img src=' http 3360 @ Model .cover IMg '/div div id=' player-wapper ' class=' player-wapper ' div class=' cover-wapper ' IMg src=' http 3360 @ Model .class='title'@Model.MusicName/div分部音频id='音频播放器' src=' http : @ Model .文件网址' data-src=' http : @ Model .文件Url '数据-开始=' @模型MusicStartSecond ' data-end=' @ Model .MusicEndSecond/audiv 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 js

；$(function(){ var $ player paper=$(' # player-wapper ')，$audioPlay=$('#audio-player ')，start second=$ audio play。数据('开始')，//默认开始时间（秒)endSecond=$audioPlay.data('end ')，//默认结束时间（秒)playSecond=startSecond，//已播放时间（秒)surplusSecond=endSecond，//剩余时间（秒)AudOiTiMer=null loading time()；正在播放();//通过点击进度条实现播放跳转$('.进步")。点击（函数(e) { //获取当前鼠标相对进度条的X坐标var positionX=e.pageX - $(this).偏移量()。向左；var width=$(this).宽度();//进度条的X坐标/进度条宽度获取播放占比var progress=(位置/宽度).toFixed(2)；$(' #玩家进度条')。css('width '，progess)；//播放占比*总时间获取已播放时间play second=parsent(progess * end second)；剩余秒=结束秒-播放秒；//播放器跳转/跟新播放时间$audioPlay[0].current time=playSecondloading time()；}) //播放按钮点击事件$('.播放')。单击(function(){ if($ player paper。有类('播放')} { Pause()；} else { Playing()；} }) //开始/继续播放函数正在播放(){ $ playerwaper。add class(' Playing ')；$playerWapper.removeClass('暂停');$audioPlay[0].play()；auoitimer=set interval(function(){ play second；盈余第二；加载时间()；if(剩余秒=0){播放秒=开始秒；surplus second=endSecondpause()；} }, 1000);//每个一秒执行一次} //暂停播放函数pause(){ $ player paper。移除类(“播放”)；$ Playerwapper。addClass('暂停')；窗户。clearinterval(AuToiTimer)；$audioPlay[0].pause()；} //加载时间和进度条函数loading time(){ $(“# start-time”).html(秒播放时间(play second))；$(' #结束时间')。html(secondatoime(surlussecond))；$(' #玩家进度条')。css(“”宽度，百分比（播放秒，结束秒));} //计算百分比函数百分比(秒1，秒2){返回(数学。回合(秒1/秒2 * 10000)/100% ')；//小数点后两位百分比} //时间转换，将秒转为00:00:00格式函数秒钟时间{ var t；if(s-1){ var hour=math。地板(s/3600)；var min=数学。楼层(s/60)60%；var sec=s % 60if(第10小时){ t='0 '小时' : ';} else { t=hour ' :} if(最小10){ t=' 0 '；} t=min ' :if(秒10){ t=' 0 '；} t=秒；}返回t；}})总结

以上所述是小编给大家介绍的基于Java脚本语言实现简单的音频播放功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！