moeplayer / vue-aplayer Goto Github PK

默认模式的播放列表是向下展开的，在不使用吸底模式的情况下怎么才能让播放列表向上展开

我确定的是2.x版本需要这样注册组件，1.x不确定，没这样用过。

Vue.use(VueAPlayer.default, {
  defaultCover: '',
  productionTip: true
});

我使用Vue 2.6.10版本 ， 插件使用2.0.0-beta.5， 在Google浏览器下会报错， 但我尝试在Edge下使用却没有这个错误。另外发生这个错误的时候，只有在列表点击切换歌曲不会有反应，其他均正常。

看 Aplayer 的 docu ,music 應該是對應到 audio 的部分
但 audio 的描述寫 audio info, should be an object or object array

嘗試加進一個object array 會報錯, error 表示只能是 object,
看 type 資料夾裡的定義，好像就真的只能是一個 object。

這樣的話只能傳一首歌進去，那該怎麽建立一個歌單？

我尝试在每次打开时都清除缓存中的aplayer-setting，但是完全没有用

有的音频报the operation is not supported

Can you add an option to disable loading the localStorage stored settings for the player ?

Hi does the playlist support customization?

大佬大佬, 啥时候抽空适配一下vue3呀
大佬大佬, 啥时候抽空适配一下vue3呀
大佬大佬, 啥时候抽空适配一下vue3呀

Getting this error. Even if i enter every info in music prop.

This is example. mp3 path is correct.

通过URL参数传入一个歌曲名
当的WEB页面打开这个连接时
不能正确的加载到新的歌曲，只能加载上次的音频或第一首音频

    mounted: function () {
    if (this.$route.params.mp3Name !== this.$refs.aplayer.currentMusic.name) {
        this.$refs.aplayer.switch(this.$route.params.mp3Name)
        console.log(this.$route.params.mp3Name,this.$route.params.mp3Name) //这里打印两个音频名称不一样，确认调用过函数
      }
   }

比如在调用这个this.$refs.aplayer.play()时传入一个参数如歌名，去播放这首歌

有三个地方用到player组件，但是只有一处有问题，在点击播放的时候点不动，打印一下play事件，原来是执行play()方法以后又立即执行pause()，如何解决呢?感谢作者

我用的单文件模式

  APlayer, {
  defaultCover: require('./assets/img/long.jpg'),
  productionTip: false,
})

<APlayer  :audio='audio' :lrcType='3' fixed :listMaxHeight=90></APlayer>

audio: [{
        name: '夜照亮了夜',
        artist: 'Moon',
        url: require('./assets/audio/yezhaoliangleye.mp3'),
        cover: require('./assets/img/long.jpg'),
      },
      {
        name: '涛声依旧',
        artist: 'Moon',
        url: require('./assets/audio/taoshengyijiu.mp3')
      }]

😳😳这个点击以后更换背景好酷啊，这个背景是怎么做到的啊？

Please check how to avoid the error.

Hello I am looking for open source projects to contribute graphical design, I have done several jobs for free in opensource projects, I would like to know if you are interested that I make a logo for this your project ?.

Greetings

Nuno Jesus

vue.esm.js?65d7:179 Uncaught (in promise) TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.

Consider the following code, when I play or stop one player, another player plays or stop too.

<template>
    <div id="app">
        <!-- musics for C-CLAYS -->
        <a-player ref="aplayer1" :music="music1"></a-player>
        <!-- musics for さーくるばんばんしー -->
        <a-player ref="aplayer2" :music="music2"></a-player>
    </div>
</template>

<script>
export default {
    data() {
        return {
            music1: [{
                title: '4年ぶりの里帰り',
                author: 'C-CLAYS',
                url: 'https://dn-rexskz.qbox.me/music/4%E5%B9%B4%E3%81%B6%E3%82%8A%E3%81%AE%E9%87%8C%E5%B8%B0%E3%82%8A.mp3',
                pic: 'http://pic.xiami.net/images/album/img92/77092/5342541358214393.jpg',
            }],
            music2: [{
                title: '秋姉妹のなく頃に',
                author: 'さーくるばんばんしー',
                url: 'https://dn-rexskz.qbox.me/music/%E7%A7%8B%E5%A7%89%E5%A6%B9%E3%81%AE%E3%81%AA%E3%81%8F%E9%A0%83%E3%81%AB.mp3',
                pic: 'http://p1.music.126.net/W9q4aOQt-PLKNonVY01l2A==/836728348780675.jpg',
            }]
        }
    }
}
</script>

Although I can change my design that one page can only have one APlayer, but I wonder if there's any solution that can fix this bug?

BTW, the old way new APlayer(...) works fine.

2.0 版本基于 APlayer v1.10.1 最新版重写，尽量与 APlayer 保持一致，最小化差异

新功能

• 吸底模式
• 固定模式与迷你模式结合
• 根据封面自适应主题色
• 可配置播放器设置的 localStorage key
• 加载状态
• 通知消息
• HLS 支持

改进

• 多实例支持 (#3)
• 新版示例页面
• 新版文档，调研 VuePress

BUG 修复

• 手机端拖动播放小圆圈出现报错 (#6)

破坏性更改

• 现在需要传递 lrcType 来指定歌词使用什么方式获取
• 移除播放列表删除歌曲功能
• fold 重命名为 listFolded
• listmaxheight 重命名为 listMaxHeight

工作流

• 升级 @vue/cli 到 3.0.0-rc.10
• 使用 eslint 代替 tslint
• 使用 prettier 统一代码风格

完成进度

• 播放器基础功能
  • 新版布局和样式
  • 数据双向绑定
  • 基本交互
• 核心功能（与 Audio 对象相关功能）
  • 播放音频
  • 歌词同步
  • 调整音量
  • 调整进度
  • 调整速度
  • 切换歌曲
  • 上一曲
  • 下一曲
  • 循环模式（列表循环 / 单曲循环 / 不循环）
  • 播放模式（顺序播放 / 随机播放）
  • 公开接口
  • 事件绑定
  • 默认封面
  • 保存播放器设置
  • 另一个实例播放时是否暂停其他实例

我就是按照你的api写的；可是不对 https://aplayer.netlify.com/docs/guide/

有vue3版本的吗

我用文档里的单文件组件方法安装的，但是调用api的时候发现都不能用，chrome控制台显示：
"TypeError: Cannot read property 'toggleList' of undefined"，而$.refs空对象，是因为这个安装方法不能使用api吗，必须使用 vue-class-component？

歌词文件如果有多个

就是上面这一段，找了好久，否则会报错 ReferenceError: document is not defined.

:autoplay="true"就不会自动播放，否则自动播放

Hi, can you provide documentation in English and also for ts typings?

Thanks.

Hi, my case is as follows:

• I have to provide custom play/next/back buttons
• I have to listen if a user clicks on next/back buttons

On compile for my vue.js project that is using typescript I get this error:

ERROR in: TS2702: 'APlayer' only refers to a type, but is being used as a namespace here.

It seems to be an internal library issue based on:
the index.d.ts file.

I followed the guide and have this only this:
main.ts

import APlayer from '@moefe/vue-aplayer';

const logoImage = './../statics/images/logo.png'

Vue.use(Aplayer, {
  defaultCover: logoImage,
  productionTip: false,
});

component.vue:

import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator'
import { getModule } from 'vuex-module-decorators';
import MusicPopupModule from './MusicPopupStoreModule';
import ZinMusicService from './../../services/drf_api/ZinMusicService'

import { APlayer } from '@moefe/vue-aplayer';

@Component({
  components: {
    APlayer,
  }
})```

会提示
play() failed because the user didn;t interact with document.
我是在pc端的chrome打开的

Hi,

I'm trying to use this.$refs.aplayer.currentSettings but as all elements in this this.$refs are html elements typescript gives me an error Property 'currentSettings' does not exist on type 'HTMLDivElement'.

<aplayer 
      ref="aplayer"
      :audio="audio" 
      :mini="playerConfig.mini"
      :loop="playerConfig.loop"
      :autoplay="playerConfig.autoplay"
      :theme="playerConfig.theme"
      :storageName="playerConfig.storageName"
      @canplay="playSong"
      @ended="playNextSong"></aplayer>
<script lang="ts">
...
playSong() {
    // Property 'currentSettings' does not exist on type 'HTMLDivElement'.
    const currentSettings= this.$refs.aplayer.currentSettings;
  }
...

问题

我有一个组件按照官方文档使用SFC+ts+vue-class-component写的：

import { APlayer } from "@moefe/vue-aplayer";
// ... 组件声明
    @Ref()
    player!: APlayer;
    audio: APlayer.Audio = {
        // ...
    };

编译能通过，但是编辑器audio类型检查（以及编译类型检查）报错

Cannot find namespace 'APlayer'

检查发现APlayer.Audio的类型定义在'@moefe/vue-aplayer/types/aplayer'，我import了一下，类型检查通过，但是cli编译报错

This dependency was not found:
@moefe/vue-aplayer/types/aplayer in ...

对于webpack来说，从一个非入口.d.ts文件import任何内容都是无法编译的，因为根本不存在对应的模块，我引用ElementUI的时候就吃了很多亏。
相反，从入口声明文件import 接口是允许的，因为入口声明文件对应的模块存在，而进入babel-loader的时候，会跳过所有的类型检查，无视接口导入。

项目内的临时解决方案

在不改动npm包源码的情况下，要让代码工作通常只有3个方法：

1. 使用jsdoc注释并包含ts专属的import，但对ts无效
2. 在tsconfig.json中手动引入类型定义，下面这些都是这个问题

{
  "compilerOptions": {
    "types": [
      "webpack-env",
      "@types/jest",
      "vue-tsx-support/enable-check",
      "vue-tsx-support/options/allow-unknown-props",
      "@moefe/vue-aplayer/types/aplayer"
    ]
}

3. 定义一个新的type，从原始导入计算出正确的类型。同样由于是类型定义，没有使用import，不会被webpack处理。

type __APlayer_Type_Import__ = typeof import("@moefe/vue-aplayer/types/aplayer");

由于aplayer.d.ts用了declare global的方式，只需要包含类型引入，不必关心实际导入的类型。

建议

为了让这些类型定义可以正确的使用，建议修改声明文件的编写方式，可以参考vue的写法。
我个人推荐的使用方式是：

1. 在aplayer.d.ts去除declare global 以及namespace，直接导出所有接口
2. 在index.d.ts中导入所有接口，并重新export，这样这些接口可以单独import
3. 同时为了照顾原有代码，定义namespace APlayer包含这些接口，然后导出namespace，此时导出APlayer既是class也是namespace

import * as APlayerType from "./aplayer";
export * from "./aplayer";
export as namespace APlayer;
export class APlayer extends Vue.Component<APlayerType.Options, APlayerType.Events> {
    // ...
}

4. 使用（经过测试通过）

import { APlayer, Audio, LrcType } from "@moefe/vue-aplayer"; 
player!: APlayer; // OK
audio1: APlayer.Audio = { }; // 可以按原来的方法用
audio2: Audio = { }; // 也可以直接用

稍后提交pr

Hello， I used your project in electron-vue and found always some warnings like these below

or on the player itself to download the current song being played? I just needed a place to add a button to download the song, thanks heaps!