sevenoutman / vue-aplayer

:cake: Easy-to-use music player for Vue 2.x

Vue-APlayer

Please refer to Future of vue-aplayer before you continue.

Vue implementation of APlayer prototype. Demo

Features

• Beautiful clean UI
• Lyrics scroll
• Playlist with repeat & shuffle controls
• Custom theme color / Self-adapting theme color
• Drag and place anywhere
• Mutex play
• HLS support
• Easy props and API
• Dependency free and light-weight (gzipped 16KB)

Using Vue-APlayer in your project? Let me know!

Usage

<aplayer autoplay
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
  }"
/>

Full documentation

中文文档

Changelog

Detailed changes fro each release are documented in the release notes.

Contribution

Feel free to open an issue if you find a bug or have a nice idea.

PRs are welcome.

The name

• When referring to Vue-APlayer, the name should be written in exactly the same case.
• When referring to its versions, either [email protected] (GitHub) or [email protected] (npm) is fine.

Related projects

• APlayer: Prior art
• @moefe/vue-aplayer: Another Vue implementation of APlayer by @u3u

Thanks

@DIYgod, for creating APlayer and sharing cloud storage for hosting Vue-APlayer's demo page media resources.

License

Vue-APlayer is MIT Licensed.

Copyright (c) 2016-present Shenghao "Doma" Lei

vue-aplayer's Issues

Demo link broken

Demo link leads to https://sevenoutman.github.io/vue-player/demo/ instead of https://sevenoutman.github.io/vue-aplayer/demo/

自动播放Bug

移植到自己网站时，将vue-aplayer.vue里

startAutoplay () {
        if (this.autoplay !== null) {
          if (!this.autoplay) {
            this.playIndex = 0
            //this.thenPlay()
          } else {
            let autoplaySong = this.musicList.find(song => song.url === this.autoplay)
            if (autoplaySong) {
              this.playIndex = this.musicList.indexOf(autoplaySong)
              this.thenPlay()
            }
          }
        }
      },

的this.thenPlay()注释掉才能正常判断是否自动播放，不知道是否自己其他操作不当。

Unexpected token: operator (>)

Error:

Unexpected token: operator (>) [./node_modules/vue-aplayer/src/utils.js:11,0][posts-65b31383fe39c33c7e6b.js:52227,26]

I use almost pure Rails 5.1.4.

关于使用 ref 的问题

我使用 v-if 来控制 aplayer在有数据之后显示
但是我又遇到一个问题 我想使用ref来获取当前的播放状态
由于ref不是响应式的 所以我获取不到当前的播放状态
请问有没有什么办法解决

关于监听播放器状态

大佬我想监听播放器播放状态试过几种办法我能 想到的但是无果 在探索过程中发现下面问题：
1、我在 vuex中设置了一个参数isPlaying 默认false 目的是用来判断是否播放 并且在获取数据之后改变这个值true
2、我在update 生命周期中判断 这个值 假如是真的话就调用 this.$refs.player.play();
3、然后我打印this.$refs.player.isPlaying 显示是false (并且会打印两次)， aplayer的播放状态参数 isPlaying 并没有立即改变过来
4、除过第一首之后打印的值都是true ，使用 this.$nextTick 结果也一样

因为我想做一个歌曲展开面板 里面的按钮可以控制播放或者暂停 现在我不知道该怎么搞了
求大佬给个思路 能监听播放器播放状态

vuex 存储 歌曲参数问题

'<'+'aplayer autoplay v-if="show" :music="this.$store.state.music">'
首先感谢作者，我在使用vuex存储 歌曲参数的时候 点击不同歌曲this.$store.state.music 里的数据已经刷新 但是页面上播放器播放的歌曲没一块更新 需要点击暂停之后在播放才刷新播放歌曲 这个是BUG么 还是我代码问题

没用VUEX 的时候直接 请求数据 更改 没问题 一用vuex就出现这个问题

Use vue-router - player reload now and now :c

If use vue-router - player reload with click router-link and start song 😸
(player based in App.vue - not router-view)

How i can fix it?)

<router-link to="/" class="uk-button" active-class="uk-button-secondary" exact>Home</router-link>
<router-link to="/todo" class="uk-button" active-class="uk-button-secondary">Todo</router-link>
<div class="uk-container">
    <router-view/>
</div>
<div>
<a-player mutex theme="#e6d0b2" mode="random"
             :music="[ {
                 title: 'あっちゅ～ま青春!',
                 author: '七森中☆ごらく部',
                 url: 'http://devtest.qiniudn.com/あっちゅ～ま青春!.mp3',
                 pic: 'http://devtest.qiniudn.com/あっちゅ～ま青春!.jpg'
             }]">
</a-player>
</div>

Reference Error: window is undefined

How to access currentMusic inside slot="display"?

Hey, awesome component! I am going to be using this in a podcast player widget.

In the docs you say "The component in this slot will receive two props: currentMusic and playStat", but I am having trouble accessing the currentMusic prop within this slot.

<aplayer
    autoplay
    :music="currentPodcast"
    :list="podcasts"
    :shuffle="false"
  >
    <span slot="display">
        // I want to access currentMusic to display a description of the podcast.
        // Accessing {{currentMusic.whatever}} doesn't work.
    </span>
</aplayer>

Any tips or examples of showing how to do this would be great! Thanks.

listFolded prop is not in aplayer-list.vue

Thank you very much for your quick response and fix. When I looked into the source code of aplayer-list.vue, listFolded prop was still not defined, though it said 'listFolded prop added'. After updating to ver 1.4.1, listFolded prop didn't work on my project. Is the file the latest one?

谷歌浏览器下进入手机调试模式，点击播入没有反映。在正常网页上是正常的。

是不是不支持模拟器的点击事件。因为鼠标移动到图片上都没播放动作

关于事件触发播放/暂停的机制如何实现

请问一下，vue-aplayer在使用中，如果通过一个函数调用它的播放/暂停事件，这个需要怎么使用，演示的demo中是有这样的功能实现的，只是在源码中没有找到对应的方法？？

Start with closed playlist

I cant find a property or event to manage the state of the playlist .. I want to view it closed when the page load...

Solved adding class .aplayer-list-hide

First song doesn't proceed to second on first play

This is a silly issue, I'm certain there is a way around this. I have an album as a playlist. I have music set to my first song, and list set to all the songs in the album. The first song will play, then the first song will play from the play list, which is a repeat of the first song. How can I include the first song in the playlist and also play it first, without repeating twice for repeat-all?

Error when changing single music object

I got an error within the watch when changing a single music(as an object).

For what I could find this is that APlayer try to access the music as an Array when you use .setMusic(0) (here: https://github.com/SevenOutman/vue-aplayer/blob/master/src/vue-aplayer.vue#L67)
You can check more about APlayer in here: https://github.com/MoePlayer/APlayer/blob/master/src/APlayer.js#L449

I tried several ways to change my music without success.

The only solution I found was to create a new player(new APlayer({...options, music: newMusic}) whenever the music change(inside the watch).

Why I did that ? APlayer won't detect a change in the music, it instantiate a new player with every possible music and it has a couple of functions to deal with changes like .addMusic(newMusics) but it has nothing to replace the current music playing. That's why I'm creating a new instance and replacing it. It worked nicely.

I tried to pass the music inside an array [newMusic] which won't raise an error and will trigger the changes of the pic and everything but not the music.

I don't know if anyone had this issue. But I'm forking and will be using mine meanwhile, I will open a PR if you find this helpful . For now, the player is not reactive and I think that should be a most for the Vue version.

Feel free to close this if you wish, is more a reporting and discussion kind of issue. Could be helpful for people with the same issue.

你好,请问怎么控制播放停止?

首先感谢作者!
我在使用的时候,把播放器 放在了弹出层中,我需要在弹出层关闭的时候,使播放器停止播放,但我在API中没有看到控制停止的方法.请问有关闭的方法吗?
感激~~~~~~~~

Aplayer controls display ?

I use Vue Aplayer. I have a song list on the Aplayer. there is no problem playing and changing songs. but what kind of configuration do I have to make in order to display buttons like stop and pause in the widget template. I could not find any documentation either.

可以添加下载按钮吗？

how to add download button？

Using Vue-APlayer in your project? Let me know!

Thanks for loving it!
Sharing your project and giving feedbacks are welcome. Leave links to your sites below :)

P.S. This issue is not for asking questions, open a new issue or join our Discord group for support

Silence Version Badge in production

Hi,

It would be nice if we could silent the Version Badge on console. Maybe it can be done by a param in the component or detecting the vue environment (development or production). I prefer to silent all console outputs in production (and many libraries do it by default).

vue-aplayer/src/vue-aplayer.vue

Line 70 in e853115

console.log(`\n\n %c Vue-APlayer ${VERSION} %c vue-aplayer.js.org \n`, 'color: #fff; background:#41b883; padding:5px 0;', 'color: #fff; background: #35495e; padding:5px 0;')

document is not defined In NUXT JS

When i import the plugin in a Nuxt.js page i get a document not defined. Can these plugin work in SSR for example Nuxt.js

Suggestion: Prop to display larger icons

First off, thanks for a nice player! However, the icons are by default very small and hard to hit. While it is possible to CSS your way to bigger buttons, it would've been nice if there was a prop for the component to resize all parts of the player (including the fonts) to a larger or smaller version and add proportional margins as well.

Original sizing, which is (too) small

Support for other sizes:

Add prop for size. Allow for various sizes, for example: sm,md (default) ,lg,xl

<aplayer 
  autoplay
  size="lg"
  :music="{
    title: 'secret base~君がくれたもの~',
    artist: 'Silent Siren',
    src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
    pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'
  }"
/>

Result

Side note: Some markup and CSS used in the player are dubious at best. Would suggest using flex-box and a skeleton CSS-grid instead.

Can't drag progress on mobile devices

How to let Vue-APlayer play/pause?

I need other button click after play or pause event ?

Log info emitting version badge information

Not sure, if this is intended or just a debugging left over.
Line# 67 & 68 in vue-aplayer.vue

window event listeners conflicts with player

I have the following scroll event listener added to my component upon its creation:

created () {
  window.addEventListener('scroll', this.getHeight);
},

This function adjust the min-height of a certain container div

getHeight () {
   let w = window.innerHeight
   let t = this.$refs.container.getBoundingClientRect().top
   return this.containerHeight = w - t
},

however, when I initially play a song, then scroll the page, the player completely stops. Upon inspection, I see some weird behavior happening to the audio elements src attribute, as if its being reset with every fire of the scroll event:

as you can see, whenever the min-height of the container div is changed, the players src is being affected...

vue-aplayer.min.js in node_modules is huge (over 2M)

安装后vue-aplayer.min.js体积很大，达到了2M多，请问这正常吗？我看前面版本的只有200多k

切换歌曲时报错

组件初始化使用Obejct，Object重新赋值时，控制台报错

如何修改组件的样式

我引用组件后，想修改样式，但是发现无法覆盖，请问该如何修改呢

手机端的滑动不支持

现在，这个很多可能是用在手机端
不支持手势滑动，建议加入下面这个滑动库，增加滑动效果
vue-slider-component

how to custom theme aplayer?

I want to change the existing styles. When I change the background color, it does not work on the others. How can I do it all by myself?

[Vue warn]: Failed to mount component: template or render function not defined.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <aplayer autoplay :music="{
      title: 'Preparation',
      author: 'Hans Zimmer/Richard Harvey',
      url: 'http://devtest.qiniudn.com/Preparation.mp3',
      pic: 'http://devtest.qiniudn.com/Preparation.jpg',
      lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
    }"></aplayer>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
export default {
  name: 'HelloWorld',
  components: {
    Aplayer
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

[Vue warn]: Failed to mount component: template or render function not defined.
found in

--->

at src\App.vue

不能显示播放列表。

首先表示感谢！
我根据文档里的配置好了，其他都没问题，但是播放列表无法显示。
后来我用chrome的开发者工具看到了一个“异常”：
dom里：

边上的样式里：

``
发现了一个我认为比较“诡异”的css样式“max-height:88px;height:0px”，
这可能导致了无法根据歌曲列表来渲染播放列表。

Varying artist length, results in songs not aligning.

If you have different length artist names by song (such as featuring xyz), then all the songs go out of alignment, is this intended? I didn't see an api/option to change this.

关于自动播放的问题

大佬，在使用你的轮子的时候我遇到一个自动播放的问题
1、点击第一首歌曲可以自动播放 然后再点击其他的歌曲的时候不会自动播放 是不是点击的时候要调用什么方法之类的
2、我看文档说 假如有多个播放器的话设置自动播放只有第一个会自动播放 但是我这个就一个播放器 搞不明白了
3、假如要调用play()方法的话 该怎么去调用
4、我没有用list播放列表 获取到的歌曲信息 存放在一个对象中 点击不同歌曲 改变对象的值

组件加载会报错，但不影响使用

无论是加载还是暂停播放等一系列事件，都会报错，classList未定义，查看源码也没搞明白这个classList事干嘛的，希望作者能够帮忙解释一下 感激不尽啊 @SevenOutman

[Vue warn]: Invalid prop: custom validator check failed for prop "music".

I have a component structure nested three-levels deep, but some mistakes occured, please help me find the reason at your convenience, I will be deeply grateful!!

level1: ResourcesLibrary.vue

<item-res-audio :file="item.content"></item-res-audio>

level2: ItemResAudio.vue

<template>
    <div class="wrap">
        <the-audio :music="music"></the-audio>
    </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable semi */
  import TheAudio from '../item/TheAudio';
  export default {
    data() {
      return {
        music: {
          title: 'Untitled',
          src: '',
          pic: require('../../assets/images/audio.jpg'),
          theme: 'teal'
        }
      };
    },
    props: {
      file: {
        type: String,
        default: () => {
          return '';
        }
      }
    },
    mounted() {
      this.music.src = this.file;
      this.music.title = this.file.split('/')[3].split('.')[0];
    },
    beforeDestroy() {
    },
    computed: {},
    methods: {

    },
    components: {
      TheAudio
    }
  };
</script>

level3: TheAudio.vue

<template>
    <div class="wrap">
        <aplayer :music="music" />
    </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable semi */
  import Aplayer from 'vue-aplayer';
  export default {
    data() {
      return {};
    },
    props: {
      music: {
        type: Object,
        default: () => {
          return {
            title: 'Untitled',
            artist: 'Unknown',
            src: '',
            pic: require('../../assets/images/audio.jpg'),
            lic: 'none',
            theme: 'teal'
          }
        }
      }
    },
    mounted() {
      console.log(this.music);
    },
    beforeDestroy() {
    },
    computed: {},
    methods: {},
    components: {
      Aplayer
    }
  };
</script>

**The error message is as follows. The player couldn't play, I found that the src and preload attribution of tag audio were Undefined! **
Error:

Warning:

DOM:

After that, I changed the structure of level3 as follows. The player could play now, but the error info printed in console again!

<template>
    <div class="wrap">
        <aplayer :music="{
            title: music.title,
            artist: 'Unknown',
            src: music.src,
            pic: require('../../assets/images/audio.jpg'),
            lic: 'none',
            theme: 'teal'
          }"></aplayer>
    </div>
</template>

That's all, looking forward to your reply.

怎么添加移动进度条进行快进和后退

现在移动进度条都是重新开始

一直显示这个错误 不知道 什么问题

vue.esm.js?5425:578 [Vue warn]: Invalid prop: custom validator check failed for prop "music".

<aplayer v-if="item.media_id>0 && item.media.sound" autoplay=null theme="#42b983" preload="none" mode="circulation" :music="{ title: item.txt, author: user.data.userName, url: item.media.sound.src, lrc:'', pic: 'https://p3.music.126.net/HJYMPi7BLKFfSvA2T3OUmg==/3316127069531628.jpg?param=90y90' }"/>

bind the data after a ajax call

is there any way to send music list data to the :music prop after an ajax call

listFolded option?

Do you plan to implement the listFolded option as the original aplayer?
I have added listFolded=true to vue-aplyer, but it didn't work as expected.

hls.js warning ?

I installed the aplayer with the npm install method. all the settings are working ok so everything is working. but the console gives a warning and it's about hls.js. how can i solve it?

./node_modules/vue-aplayer/dist/vue-aplayer.min.js
Module not found: Error: Can't resolve 'hls.js' in 'C:\xampp\htdocs\sezenaksu\node_modules\vue-aplayer\dist'
 @ ./node_modules/vue-aplayer/dist/vue-aplayer.min.js 1:119-136
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

New logo design

Hi, I need to know if you have something on your mind for your logo? color? shape?
Do you have any special request?
Can you tell me in what can I get inspired to create the design?

This are a lot of questions :) but I allways want to make a design that the project owner likes it very much.

Greetings
Nuno Jesus

ReferenceError: production is not defined

The error message:

vue.runtime.esm.js?ff9b:352 Uncaught (in promise) ReferenceError: production is not defined
at Object.eval (vue.runtime.esm.js?ff9b:352)
at eval (vue.runtime.esm.js?ff9b:7921)
at Object.<anonymous> (vue-aplayer.min.js:1)
at e (vue-aplayer.min.js:1)
at eval (7:1)
at Object.<anonymous> (vue-aplayer.min.js:1)
at e (vue-aplayer.min.js:1)
at eval (23:2)
at Object.<anonymous> (vue-aplayer.min.js:1)
at e `(vue-aplayer.min.js:1)`

The place where vue.runtime throws the error:
productionTip: process.env.NODE_ENV !== 'production',

Current Version
"vue-aplayer": "^1.1.0"

I used a laravel-vue template then I created my own wrapper for the vue-aplayer and it worked beautifully up until now.

Steps to reproduce:

• Create project from template laravel-vue-spa
• composer install
• npm install
• npm install vue-aplayer --save
• import the Aplayer in the welcome.vue page (so that it's immediately called)
• npm run watch

In the console you get the error above.

Without this library everything functions normally.
I hope you can show me the way! If you have an idea where the issue could be, that would be great.

All the best!

build error in vue-cli init project

请问如何安装没有hls.js的版本

因为hls.js体积很大，请问是否支持安装没有hls.js的版本？

shrink the songlist automatically?

I have managed to make the listFolded prop work at the initial phase of loading site.
I just wonder if there any way to trigger the toggle button event, when I click any item in the song list?
I tried to include this.listFolded = !this.listFolded in the @play event, and it turned out that this property can be altered, but the opened songlist remains unchanged. any idea?

Error in callback for watcher "music": "TypeError: Cannot read property 'pic' of undefined" found in ---> <APlayer>

Error in callback for watcher "music": "TypeError: Cannot read property 'pic' of undefined"
可以正常播放，但进入页面就报错

循环按钮和随机播放没反应

每次切换下一首就报 http://localhost:8000/undefined 这个错，但是在列表里点击切换没问题

autoplay not working

Hi, thanks for lib! Awesome, except autoplay doesn't work for me, I tried:

autoplay
autoplay=true
autoplay="true"
:autoplay
:autoplay=true
:autoplay="true"

Please help 😒

<template>
    <div class="row musicplayer">
        <div class="col-md-6 offset-md-3 col-sm-12 offset-sm-0">
            <aplayer autoplay :music="song"></aplayer>
        </div>
    </div>
</template>

<script>
    import Aplayer from 'vue-aplayer';
    export default {
        components: {
            Aplayer
        },
        props: ["title", "artist", "src", "img"],
        data () {
            return {
                song: {
                    'title': this.title,
                    'artist': this.artist,
                    'src': this.src,
                    'pic': this.img,
                    'theme': 'pic'
                },
            };

        }
    }
</script>