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

最新推荐文章于 2023-05-11 20:30:39 发布

阿……莫西林

最新推荐文章于 2023-05-11 20:30:39 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/github_38854224/article/details/100016455

样式数据处理 H5 vue 专栏收录该内容

19 篇文章

订阅专栏

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

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

audio.js audio.css 资源下载

详细代码上篇

样式

部分代码：

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>详情页</title>
    <script src="https***query_172.js" language="javascript"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <!--动画样式-->
    <link href="http:***/animate.css" rel="stylesheet" type="text/css">
    <!--音频播放器-->
    <link rel="stylesheet" type="text/css" href="./css/audio.css">
    <script type="text/javascript" src="./js/audio.js"></script>
</head>

<body>
****
****
****
<!-- 播放列表 -->
    <ul :class="mp3_count >= 1?'music':'hid'" id="storyLin">
        <li v-for="(list,key) in data.mp3_list" @click="playSon(this,key)" :class="{'on':clicked==key}">
            <div :class="[{'hid':clicked ==key}, num]">{{key+1}}</div>
            <div :class="[{'hid':clicked !=key}, laba]">&#xe65e;</div>
            <div class="name">
                <p>{{list.title}}</p>
                <div class="dat">
                    <span>&#xe60c;</span>{{list.num}}人
                    <span style="margin-left: 20px;">&#xe68d;</span>{{list.time}}
                </div>
            </div>
        </li>
    </ul>
****
****
****
    <!--    <div :class="mp3_count >= 1 ? 'audio-box hid':'hid'">-->
    <div :class="[{'hid':mp3_count < 1}, audio_box]">
        <div class="audio-container">
            <div class="audio-cover" @click="goRight()"></div>
            <div class="audio-view">
                <h3 class="audio-title">未知歌曲</h3>
                <div class="audio-body">
                    <div class="audio-backs">
                        <div class="audio-this-time">00:00</div>
                        <div class="audio-count-time">00:00</div>
                        <div class="audio-setbacks">
                            <i class="audio-this-setbacks">
                                <span class="audio-backs-btn"></span>
                            </i>
                            <span class="audio-cache-setbacks">
							</span>
                        </div>
                    </div>
                </div>
                <div class="audio-btn">
                    <div class="audio-select">
                        <div class="audio-prev"></div>
                        <div class="audio-play"></div>
                        <div class="audio-next"></div>
                        <!--                        <div class="audio-menu"></div>-->
                        <!--                        <div class="audio-volume"></div>-->
                    </div>
                    <div class="audio-set-volume">
                        <div class="volume-box">
                            <i><span></span></i>
                        </div>
                    </div>
                    <div class="audio-list">
                        <div class="audio-list-head">
                            <p>☺随心听</p>
                            <span class="menu-close">关闭</span>
                        </div>
                        <ul class="audio-inline">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--音频播放器-->
</div>
</body>

</html>

js方法

    var api = "htt***p";
    var song = [];//定义播放列表（可后续添加）
    var audioFn = [];//播放器类
    var main = new Vue({
        el: '#main',
        data: {
           ****
            audio_type: 2,//播放器是否展示隐藏,
            clicked: -1,
            num: 'num',
            laba: 'laba',
            audio_box:'audio-box audio-boxhid'

        },
        created() {
            var that = this;
            that.get_data();//内含实例化 播放器

        },
        methods: {
            //获取专辑信息
            get_data() {
                var that = this;
                $.get(
                    api + '?meth***r_id=' + that.user_id + '&id=' + that.id,
                    function (data) {
                        if (data.ret) {
                            that.data = data.data;
                            //音频列表赋值,并实例化音频组件
                            song = that.data.mp3_list;//播放列表
                            that.mp3_count = song.length
                            if (that.mp3_count >= 1) {
                                that.new_audio(song);
                            }

                        } else {
                            alert('数据获取失败！')
                        }
                    },
                    'json'
                )
            },

            //实例化音频播放
            new_audio(song) {
                var that = this;
                audioFn = audioPlay({
                    song: song,
                    autoPlay: false  //是否立即播放第一首，autoPlay为true且song为空，会alert文本提示并退出
                });
                //获取音频播放key
                if (!songEq) {
                    songEq = -1
                }
                //监听当前播放曲目的key值，对应播放列表样式
                setInterval(function () {
                    that.clicked = songEq;
                }, 300)
            },

            /*
            音频播放器相关操作
             */
            playSon(th, key) {
                var that = this;
                clearTimeout(that.clock);//清除定时器
                $(".audio-box").removeClass("hid");
                $(".audio-box").removeClass("audio-boxhid");
                audioFn.selectMenu(key, true);
                that.clicked = key;
                that.clock = setTimeout(function () {
                    $(".audio-box").addClass("audio-boxhid");
                    that.audio_type = 2;
                }, 5000);
            },

            //控制播放器是否展开
            goRight() {
                var that = this;
                //清除定时器
                clearTimeout(that.clock);
                //播放器是否收起
                if (that.audio_type == 1) {
                    $(".audio-box").addClass("audio-boxhid");
                    that.audio_type = 2;
                } else {
                    $(".audio-box").removeClass("audio-boxhid");
                    that.audio_type = 1;
                }
                //5秒定时器 过后自动收起
                that.clock = setTimeout(function () {
                    $(".audio-box").addClass("audio-boxhid");
                    that.audio_type = 2;
                }, 5000);
            }
        }
    })

    /*
    $(function () {
        // 向歌单中添加新曲目，第二个参数true为新增后立即播放该曲目，false则不播放
        audioFn.newSong({
            'cover': 'images/audio/cover4.jpg',
            'src': 'http://filebaby.qubaobei.com/story/low/105.mp3',
            'title': '极乐净土 - GARNiDELiA'
        }, false);

        // 暂停播放
        audioFn.stopAudio();

        // 开启播放
        audioFn.playAudio();

        // 选择歌单中索引为3的曲目(索引是从0开始的)，第二个参数true立即播放该曲目，false则不播放
        audioFn.selectMenu(3,true);

        // 查看歌单中的曲目
        console.log(audioFn.song);

        // 当前播放曲目的对象
        console.log(audioFn.audio);
    });

    */