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

前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio_vue2 h5 音乐播放器

作者：Cpp五条 | 2024-03-16 06:10:40

赞

踩

vue2 h5 音乐播放器

一个h5的音频播放器，播放列表与播放器上下首切换 样式效果对应起来。

五秒后自动收缩形成挂件（不可移动）。点击播放器图片 即可展开、收起。

audio.js    audio.css  资源下载

详细代码上篇

样式

                         

部分代码：

html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <meta name="format-detection" content="telephone=no"/>
  6.     <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
  7.     <title>详情页</title>
  8.     <script src="https***query_172.js" language="javascript"></script>
  9.     <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  10.     <!--动画样式-->
  11.     <link href="http:***/animate.css" rel="stylesheet" type="text/css">
  12.     <!--音频播放器-->
  13.     <link rel="stylesheet" type="text/css" href="./css/audio.css">
  14.     <script type="text/javascript" src="./js/audio.js"></script>
  15. </head>
  16.  
  17. <body>
  18. ****
  19. ****
  20. ****
  21. <!-- 播放列表 -->
  22.     <ul :class="mp3_count >= 1?'music':'hid'" id="storyLin">
  23.         <li v-for="(list,key) in data.mp3_list" @click="playSon(this,key)" :class="{'on':clicked==key}">
  24.             <div :class="[{'hid':clicked ==key}, num]">{{key+1}}</div>
  25.             <div :class="[{'hid':clicked !=key}, laba]">&#xe65e;</div>
  26.             <div class="name">
  27.                 <p>{{list.title}}</p>
  28.                 <div class="dat">
  29.                     <span>&#xe60c;</span>{{list.num}}人
  30.                     <span style="margin-left: 20px;">&#xe68d;</span>{{list.time}}
  31.                 </div>
  32.             </div>
  33.         </li>
  34.     </ul>
  35. ****
  36. ****
  37. ****
  38.     <!--    <div :class="mp3_count >= 1 ? 'audio-box hid':'hid'">-->
  39.     <div :class="[{'hid':mp3_count < 1}, audio_box]">
  40.         <div class="audio-container">
  41.             <div class="audio-cover" @click="goRight()"></div>
  42.             <div class="audio-view">
  43.                 <h3 class="audio-title">未知歌曲</h3>
  44.                 <div class="audio-body">
  45.                     <div class="audio-backs">
  46.                         <div class="audio-this-time">00:00</div>
  47.                         <div class="audio-count-time">00:00</div>
  48.                         <div class="audio-setbacks">
  49.                             <i class="audio-this-setbacks">
  50.                                 <span class="audio-backs-btn"></span>
  51.                             </i>
  52.                             <span class="audio-cache-setbacks">
  53. 							</span>
  54.                         </div>
  55.                     </div>
  56.                 </div>
  57.                 <div class="audio-btn">
  58.                     <div class="audio-select">
  59.                         <div class="audio-prev"></div>
  60.                         <div class="audio-play"></div>
  61.                         <div class="audio-next"></div>
  62.                         <!--                        <div class="audio-menu"></div>-->
  63.                         <!--                        <div class="audio-volume"></div>-->
  64.                     </div>
  65.                     <div class="audio-set-volume">
  66.                         <div class="volume-box">
  67.                             <i><span></span></i>
  68.                         </div>
  69.                     </div>
  70.                     <div class="audio-list">
  71.                         <div class="audio-list-head">
  72.                             <p>☺随心听</p>
  73.                             <span class="menu-close">关闭</span>
  74.                         </div>
  75.                         <ul class="audio-inline">
  76.                         </ul>
  77.                     </div>
  78.                 </div>
  79.             </div>
  80.         </div>
  81.     </div>
  82.     <!--音频播放器-->
  83. </div>
  84. </body>
  85.  
  86. </html>

js方法

  1.     var api = "htt***p";
  2.     var song = [];//定义播放列表（可后续添加）
  3.     var audioFn = [];//播放器类
  4.     var main = new Vue({
  5.         el: '#main',
  6.         data: {
  7.            ****
  8.             audio_type: 2,//播放器是否展示隐藏,
  9.             clicked: -1,
  10.             num: 'num',
  11.             laba: 'laba',
  12.             audio_box:'audio-box audio-boxhid'
  13.  
  14.         },
  15.         created() {
  16.             var that = this;
  17.             that.get_data();//内含实例化 播放器
  18.  
  19.         },
  20.         methods: {
  21.             //获取专辑信息
  22.             get_data() {
  23.                 var that = this;
  24.                 $.get(
  25.                     api + '?meth***r_id=' + that.user_id + '&id=' + that.id,
  26.                     function (data) {
  27.                         if (data.ret) {
  28.                             that.data = data.data;
  29.                             //音频列表赋值,并实例化音频组件
  30.                             song = that.data.mp3_list;//播放列表
  31.                             that.mp3_count = song.length
  32.                             if (that.mp3_count >= 1) {
  33.                                 that.new_audio(song);
  34.                             }
  35.  
  36.                         } else {
  37.                             alert('数据获取失败！')
  38.                         }
  39.                     },
  40.                     'json'
  41.                 )
  42.             },
  43.  
  44.             //实例化音频播放
  45.             new_audio(song) {
  46.                 var that = this;
  47.                 audioFn = audioPlay({
  48.                     song: song,
  49.                     autoPlay: false  //是否立即播放第一首，autoPlay为true且song为空，会alert文本提示并退出
  50.                 });
  51.                 //获取音频播放key
  52.                 if (!songEq) {
  53.                     songEq = -1
  54.                 }
  55.                 //监听当前播放曲目的key值，对应播放列表样式
  56.                 setInterval(function () {
  57.                     that.clicked = songEq;
  58.                 }, 300)
  59.             },
  60.  
  61.             /*
  62.             音频播放器相关操作
  63.              */
  64.             playSon(th, key) {
  65.                 var that = this;
  66.                 clearTimeout(that.clock);//清除定时器
  67.                 $(".audio-box").removeClass("hid");
  68.                 $(".audio-box").removeClass("audio-boxhid");
  69.                 audioFn.selectMenu(key, true);
  70.                 that.clicked = key;
  71.                 that.clock = setTimeout(function () {
  72.                     $(".audio-box").addClass("audio-boxhid");
  73.                     that.audio_type = 2;
  74.                 }, 5000);
  75.             },
  76.  
  77.             //控制播放器是否展开
  78.             goRight() {
  79.                 var that = this;
  80.                 //清除定时器
  81.                 clearTimeout(that.clock);
  82.                 //播放器是否收起
  83.                 if (that.audio_type == 1) {
  84.                     $(".audio-box").addClass("audio-boxhid");
  85.                     that.audio_type = 2;
  86.                 } else {
  87.                     $(".audio-box").removeClass("audio-boxhid");
  88.                     that.audio_type = 1;
  89.                 }
  90.                 //5秒定时器 过后自动收起
  91.                 that.clock = setTimeout(function () {
  92.                     $(".audio-box").addClass("audio-boxhid");
  93.                     that.audio_type = 2;
  94.                 }, 5000);
  95.             }
  96.         }
  97.     })
  98.  
  99.     /*
  100.     $(function () {
  101.         // 向歌单中添加新曲目，第二个参数true为新增后立即播放该曲目，false则不播放
  102.         audioFn.newSong({
  103.             'cover': 'images/audio/cover4.jpg',
  104.             'src': 'http://filebaby.qubaobei.com/story/low/105.mp3',
  105.             'title': '极乐净土 - GARNiDELiA'
  106.         }, false);
  108.         // 暂停播放
  109.         audioFn.stopAudio();
  111.         // 开启播放
  112.         audioFn.playAudio();
  114.         // 选择歌单中索引为3的曲目(索引是从0开始的)，第二个参数true立即播放该曲目，false则不播放
  115.         audioFn.selectMenu(3,true);
  117.         // 查看歌单中的曲目
  118.         console.log(audioFn.song);
  120.         // 当前播放曲目的对象
  121.         console.log(audioFn.audio);
  122.     });
  124.     */

 

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

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

  

闽ICP备14008679号