devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

h5音乐播放器实现

作者：盐析白兔 | 2024-03-16 06:16:33

赞

踩

h5音乐播放器

本文为大家分享一个简易音乐播放器的实现，页面设置参考网易播放器设计，主要使用js+jquery实现前端开发与布局，使用Ajax进行异步请求后端数据。文中展示了详细的代码，供大家参考。项目已发布：xinghuan1998/music-player (github.com)

Html代码

  1. <body>
  2.  
  3.     <div class="volume-control-panel"> <!--font awesome图标库  音量键-->
  4.         <i class="fa fa-volume-up fa-lg"></i>
  5.         <div id="volume-bar" class="volume-bar">
  6.             <div id="volume-control" class="pro-control" style="bottom:0"></div>
  7.         </div>
  8.     </div>
  9.  
  10.  
  11.     <div class="music-detail"><!--font awesome图标库  播放详情页-->
  12.         <div class="heder-detail">
  13.  
  14.             <div class="dcol" id="back" style="height:60px;width:50px;line-height: 60px;text-align: center;"><i
  15.                     class="fa fa-chevron-down fa-lg"></i></div>
  16.             <div class="dcol" style="margin: auto;height: 60px;position: absolute;left:50%;transform: translate(-50%);">
  17.                 <div class="det-title title" style="line-height: 35px;"></div>
  18.                 <div class="retbutton actor" style="line-height: 25px; text-align: center;"></div>
  19.             </div>
  20.         </div>
  21.         <div class="mid-detail" style="text-align:center;">
  22.             <div id="shownimg">
  23.                 <img class="cover spinner" style="width:100%;height:100%;"
  24.                     src="https://c-ssl.duitang.com/uploads/item/202005/15/20200515000325_hqpkb.jpg" alt="" \>
  25.             </div>
  26.  
  27.  
  28.             <div class="excircle"></div>
  29.         </div>
  30.         <div class="bottom-detail">
  31.             <div class="pla1" style="text-align:center;">
  32.                 <span><i class="fa fa-heart-o fa-lg"></i></span>
  33.                 <span>2</span>
  34.                 <span>3</span>
  35.                 <span>4</span>
  36.             </div>
  37.             <div class="progress">
  38.                 <div class="pro-bar" id="pro-bar">
  39.                     <div class="pro-control" id="pro-control"></div>
  40.                 </div>
  41.  
  42.             </div>
  43.             <div class="control">
  44.                 <div><i class="fa fa-random fa-2x"></i></div>
  45.                 <div class="backward-button"><i class="fa fa-step-backward fa-2x"></i></div>
  46.                 <div class="play-button">
  47.                     <div
  48.                         style=" border-radius: 50%;border: 2px solid; width:60px;height: 60px;top:44%;left:49%;position: absolute;transform: translate(-50%,-50%);">
  49.  
  50.                     </div><i class="fa fa-play fa-2x"></i>
  51.                 </div>
  52.                 <div class="forward-button"><i class="fa fa-step-forward fa-2x"></i></div>
  53.                 <div class="volume-button">
  54.                     <i class="fa fa-volume-up fa-2x"></i>
  55.                 </div>
  56.             </div>
  57.  
  58.         </div>
  59.     </div>
  60.     <audio src="" id="main_audio" preload="auto"></audio>
  61.     <div class="header">音乐列表
  62.  
  63.     </div>
  64.     <div class="body-content">
  65.         <div class="music-list">
  66.             
  67.         </div>
  68.     </div>
  69.  
  70.     <div class="music-bar"><!-- 页面底部 播放控制按钮-->
  71.         <div style="width:50px ;height:60px;float:left;position:relative;padding-left: 0px;margin-top: -10px;">
  72.             <img src="https://c-ssl.duitang.com/uploads/item/202005/15/20200515000325_hqpkb.jpg" class="cover spinner"
  73.                 id="cover">
  74.         </div>r
  75.  
  76.         <div class='pmusic-bar' style="width:calc(100% - 130px);float:left;height:60px;padding-left: 20px;">
  77.  
  78.             <span id="title" class="title"></span>
  79.             <span style="font-size:10px;color:#cecbcb">- <span id="actor" class="actor"></span></span>
  80.         </div>
  81.         <div class="play-button" style="width:50px;float:left"><i class="fa fa-play fa-2x"></i></div>
  82.  
  83.     </div>
  84.  
  85.  
  86. </body>

音乐播放的JS代码

全局变量

  1. // 全局变量
  2. var mainAudio = $('#main_audio');//获取元素
  3. var isPlay = false;//声明一个标记，记录当前播放状态
  4. var isMouseDownOnPlayBar = false;//记录鼠标按下音乐播放按钮状态
  5. var isMouseDownOnVolumeBar = false;//记录鼠标按下音量按钮的状态
  6. var isVolumeBarShow = false;//记录当前音量进度条显示状态
  7. var musicList = [];//设置音乐列表
  8. var playIdxNow = -1;//设置当前正在播放音乐的id

首页音乐列表歌单展示

通过ajax先后端发送请求得到歌单列表数据，通过for循环遍历歌单列表，设置每一首歌曲的title,actor，写入到歌单项的HTML模板中，然后通过append函数将歌单项模板添加到div.music-list中。当点击某个音乐时，调用加载音乐播放函数，实现当前点击音乐播放。

  1. function getMusicList() {//获取首页歌单列表
  2.     $.ajax({
  3.         url: 'http://218.199.4.140:5000/list_music',
  4.         success: function (data) {
  5.             musicList = data.data;
  6.  
  7.             for (var i = 0; i < musicList.length; i++) {
  8.                 var actor = musicList[i].actor;
  9.                 var title = musicList[i].title;
  10.                 var id = musicList[i].id;
  11.                 var html = '<div class="item" onclick="loadMusic(' + i + ')">\
  12. <div class="col" style = "width:50px;text-align: center;line-height:43px" >'+ (i + 1) + '</div>\
  13.         <div class="col" style="width:calc(100% - 110px);">\
  14.             <div class="song">'+ title + '</div>\
  15.             <div class="act" style="font-size:80%">'+ actor + '</div>\
  16.         </div>\
  17.         <div class="col" style="width:50px;line-height:43px"><i class="fa fa-youtube-play fa-lg"></i></div>\
  18.     </div></div>';
  19.                 $('.music-list').append(html);
  20.             }
  21.         }
  22.     })
  23. }
  24.

 加载指定音乐函数

记录当前音乐的索引，通过对应歌曲索引的id访问歌曲播放的请求地址，获取图片，播放地址，通过修改audio的src属性，更改音乐播放的地址，调用音乐播放函数，实现指定音乐的播放。

  1. function loadMusic(i) {//加载指定音乐的index并且播放
  2.     playIdxNow = i;
  3.     $.ajax({
  4.         url: 'http://218.199.4.140:5000/music_info?id=' + musicList[i].id,
  5.         success: function (data) {
  6.             var cover = data.cover;
  7.             var u = data.abc;
  8.             var img = data.cover;
  9.             $('.cover').attr('src', img);
  10.             $('.title').text(data.title);
  11.             $('.actor').text(data.actor);
  12.             mainAudio.attr('src', u);
  13.             musicPlay();
  14.         }
  15.     })
  16. }
  17.  
  18. //函数调用
  19. getMusicList();
  20. $(window).keypress(function (e) {
  21.     if (e.keyCode != 32) return;
  22.     console.log(e)
  23.     PlayControl();
  24.  
  25. });

功能函数

音乐播放暂停函数

通过audio标签更改音乐的play和pause属性

  1. // 功能函数
  2. function musicPlay() {//音乐播放
  3.     mainAudio[0].play();
  4.     isPlay = true;
  5.     $('.play-button i').removeClass('fa-play').addClass('fa-pause');
  6. }
  7.  
  8. function musicPause() {//音乐暂停
  9.     mainAudio[0].pause();
  10.     isPlay = false;
  11.     $('.play-button i').removeClass('fa-pause').addClass('fa-play');
  12. }
  13. function musicJumpByPerc(p) {//百分比定位控制音乐进度
  14.     mainAudio[0].currentTime = mainAudio[0].duration * p;
  15. }

控制音乐播放事件

通过给播放按钮添加鼠标单击事件，调用控制音乐播放函数。

  1. //控制音乐播放事件
  2. function PlayControl() {
  3.     if (isPlay) {
  4.         musicPause();
  5.         $('.cover').removeClass('spinner');//移除图片旋转动画效果
  6.     } else {
  7.         musicPlay();
  8.         $('.cover').addClass('spinner');
  9.     }
  10. };
  11. $('.play-button').click(PlayControl);

切换当前播放音乐事件

通过判断当前播放音乐的索引，调用加载音乐函数，将上一首音乐或下一首音乐的索引传入函数，进行切换播放。

  1. $(".forward-button").click(function () {//播放下一首音乐
  2.     if (playIdxNow == musicList.length - 1) {//如果当前音乐的索引等于最后一首歌的索引
  3.         loadMusic(0);//下一首歌则为第一首歌
  4.     } else {
  5.         loadMusic(playIdxNow + 1);//依次将索引加一
  6.     }
  7. })
  8. $(".backward-button").click(function () {//播放上一首音乐
  9.     if (playIdxNow == 0) {//如果当前音乐的索引等于第一首歌的索引
  10.         loadMusic(musicList.length - 1);//上一首歌则为最后一首歌
  11.     } else {
  12.         loadMusic(playIdxNow - 1);//依次将索引减一
  13.     }
  14. })

进度条控制类

此控制类包含构造函数，将进度条，进度条控件，进度开始的方向作为参数，分别计算音乐播放进度条（x轴放置在进度条上横向拖动，方向记为left）和音量设置进度条（y轴放置在进度条上纵向拖动，方向记为top）的起点，终点的（x或y）坐标。使用绝对坐标设置进度函数，将事件发生的绝对坐标作为参数，如果该坐标在进度条的开始和结束坐标之间，则修改该坐标的方向属性为该坐标与起点的差（当前坐标在进度条上的长度距离）。使用百分比设置进度函数，将控件占进度条的百分比作为参数，分别用其百分比与进度条长度或高度相乘，设置当前进度的距离长度。获取进度函数，通过控件当前的距离比上进度条的距离得出当前控件进度百分比。后面将进度百分比传入音乐播放进度函数中，即可实现音乐播放进度与控件进度同步的效果。

音乐进度条和音量进度条分别调用此函数，得到两者控件的进度百分比。

  1. //进度条控制类
  2. class ProgressBar {
  3.     constructor(bar, dot, direction) {
  4.         this.bar = bar;
  5.         this.dot = dot;
  6.         this.direction = direction;
  7.         if (direction == 'left') {
  8.             this.start = bar.offset().left;//计算进度条开始坐标x
  9.             this.end = this.start + bar.width() - 5;//结束x坐标
  10.         }
  11.         else {
  12.             this.start = bar.offset().top;//计算音量控制小圆点的开始坐标y
  13.             this.end = this.start + bar.height() - 5;//结束坐标y
  14.         }
  15.  
  16.  
  17.     }
  18.     setPosByEvent(x) {//使用绝对坐标X设置进度
  19.         if (x <= this.end && x >= this.start) {
  20.             this.dot.css(this.direction, x - this.start + 'px');//进度条当前进度（根据小圆点x坐标计算）
  21.         }
  22.     }
  23.     setPosByPerc(p) {//使用百分比设置进度
  24.         if (this.direction == 'left')
  25.             var x = p * this.bar.width();
  26.         else
  27.             var x = p * this.bar.height();
  28.         this.dot.css(this.direction, x + 'px');
  29.     }
  30.     getPosByPerc() {//使用百分比获取进度
  31.         return +this.dot.css(this.direction).replace('px', '') / (this.end - this.start);//获取控制小圆点的属性，并用空字符代替px进行百分比计算
  32.     }
  33. }
  34.  
  35. var musicBar = new ProgressBar($('#pro-bar'), $('#pro-control'), 'left');
  36. var volumeBar = new ProgressBar($('#volume-bar'), $('#volume-control'), 'top');

鼠标事件

对鼠标进行监听，设置鼠标移动事件，记录鼠标当前（按下，弹起）的状态，鼠标按下时修改默认flag值为true，当鼠标弹起时，仍为false。在鼠标移动事件下对鼠标状态做一个判断，如果为按下时，则执行上文的（进度条拖动函数），否则不执行。

  1.  //PC端添加Mouse事件
  2.     $('#pro-control').on('mousedown', function () {//进度条控制圈按下事件
  3.         isMouseDownOnPlayBar = true;
  4.     });
  5.     $('#volume-control').on('mousedown', function () {//进度条控制圈按下事件
  6.         isMouseDownOnVolumeBar = true;//记录鼠标按下状态
  7.         console.log('mousedown')
  8.     });
  9.  
  10.     $(document).on('mousemove', function (event) {//鼠标移动函数，在鼠标按下状态改变进度条的控件位置属性
  11.         if (isMouseDownOnPlayBar) {//如果鼠标按下，则执行绝对坐标定位函数，确定控件在进度条上距离起点的长度距离
  12.             musicBar.setPosByEvent(event.pageX);
  13.             var p = musicBar.getPosByPerc();//获取音乐进度条的百分比
  14.             musicJumpByPerc(p);//通过音乐进度条百分比设置音乐播放进度
  15.         }
  16.         if (isMouseDownOnVolumeBar) {
  17.             volumeBar.setPosByEvent(event.pageY);//如果鼠标按下，则执行绝对坐标定位函数，确定控件在音量条上距离起点的高度距离
  18.             var p = volumeBar.getPosByPerc();//获取音量控件在进度条的百分比
  19.             mainAudio[0].volume = 1 - p;//通过音量进度条百分比设置音量的大小
  20.         }
  21.     });
  22.  
  23.     $(document).on('mouseup', function () {
  24.         isMouseDownOnPlayBar = false;
  25.         isMouseDownOnVolumeBar = false;
  26.     });

音量控制函数

该函数等同于音乐播放进度函数，流程同上。

  1. $('.volume-button').click(function () {//音量进度条显示隐藏事件
  2.     if (isVolumeBarShow) {
  3.         $('.volume-control-panel').hide();//音量控制条隐藏
  4.         isVolumeBarShow = false;
  5.     } else {
  6.         $('.volume-control-panel').show();//将音量进度条显示
  7.         volumeBar = new ProgressBar($('#volume-bar'), $('#volume-control'), 'top');//调用进程函数设置音量的大小，控件跟随鼠标移动
  8.         isVolumeBarShow = true;//更改隐藏状态
  9.     }
  10. }).blur(function () {//鼠标失去焦点 音量控制隐藏
  11.     $('.volume-control-panel').hide();
  12.     isVolumeBarShow = false;
  13. });

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/247626
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号