无法调用play方法 报错

[Jun1121]

        this.controller = new cplayer({
            element: document.getElementById('music'),
            autoplay: true,
            playlist: [
                {
                    name: '脆弱一分钟',
                    artist: '林宥嘉',
                    src: 'http://h5player.bytedance.com/video/music/audio.mp3',
                    poster: 'http://h5player.bytedance.com/video/music/poster-big.jpeg',
                    lyric: `[00:00.00] 脆弱一分钟\n[00:00.00] 作曲 : 林家谦\n[00:00.00] 作词 : 徐世珍/吴辉福\n[00:00.000]编曲：林家谦\n[00:00.000]时钟不要走\n[00:04.220]让我脆弱一分钟\n[00:07.440]要多久才能习惯被放手\n[00:15.800]马克杯空了 暖暖的温热\n[00:22.660]却还在我手中停留\n[00:27.960]\n[00:29.790]勇气不要走\n[00:32.200]给我理由再冲动\n[00:35.690]去相信爱情 就算还在痛\n[00:43.960]如果我不说不会有人懂\n[00:50.720]失去你我有多寂寞\n[00:55.610]还是愿意\n[00:57.580]付出一切仅仅为了一个好梦\n[01:03.980]梦里有人真心爱我 陪我快乐也陪我沉默\n[01:11.260]没有无缘无故的痛承受越多越成熟\n[01:18.630]能让你拥抱更好的我\n[01:25.030] 谁也不要走\n[01:28.270]应该是一种奢求\n[01:31.900]可是我只想 握紧你的手\n[01:39.780]我宁愿等候 也不愿错过\n[01:46.630]你对我微笑的时候\n[01:56.780]\n[02:18.910]还是愿意\n[02:21.320]用尽全力仅仅为了一个以后\n[02:27.870]哪怕生命并不温柔哪怕被幸福一再反驳\n[02:34.870]也要相信伤痕累累 其实只是在琢磨\n[02:42.070]能让你为之一亮 的我\n[02:53.910]\n[02:56.350]制作人：林宥嘉\n[02:57.750]制作助理：张婕汝\n[02:59.010]录音师：陈文骏、叶育轩\n[03:00.410]录音室：白金录音室\n[03:01.740]混音师：SimonLi @ nOiz\n[03:03.000]OP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)\n[03:04.050]SP: Warner/Chappell Music Taiwan Ltd.\n[03:04.910]OP：Universal Ms Publ Ltd Taiwan\n`

                }
            ]
        });

        // this.controller.to(0);
        console.log(this.controller.play())

[Copay]

您能提供报错信息吗？最好使用 codepen.io 再现这个错误。

[Jun1121]

vendor.js?id=6bac470bc6c61e79f7c2:165651 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'play' of undefined"

found in

---> at resources/js/layout/components/MusicPlayer.vue

... (1 recursive calls)
at resources/js/layout/index.vue
at resources/js/views/App.vue

[Copay]

🤔看起来不怎么显然……能否使用 https://codepen.io/ 来再现这个错误呢？这将有利于我们更方便地解决这个问题。

[Jun1121]

....我是后端开发 codepen不知道怎么弄 ，能有什么其他的方法展示给你看吗？

[Copay]

但请千万不要做出来上传到百度网盘！

[Jun1121]

就是在vue里面 mounted 去new 一个 cplayer ，然后去调用play方法就报错了

[Jun1121]

import cplayer from 'cplayer'

export default {
    name: "MusicPlayer",
    data() {
        return {
            controller: '',
        }
    },
    mounted() {
        this.controller = new cplayer({
            element: document.getElementById('music'),
            playlist: [
                {
                    name: '脆弱一分钟',
                    artist: '林宥嘉',
                    src: 'http://h5player.bytedance.com/video/music/audio.mp3',
                    poster: 'http://h5player.bytedance.com/video/music/poster-big.jpeg',
                }
            ]
        });
        this.controller.play()
        // this.controller.to(0);
    }
}

[Jun1121]

我发现了， 必须在使用add方法后才可以使用play方法