moeplayer / vue-aplayer Goto Github PK
View Code? Open in Web Editor NEW🍰 A beautiful HTML5 music player for Vue.js
Home Page: https://aplayer.moefe.org/
License: MIT License
🍰 A beautiful HTML5 music player for Vue.js
Home Page: https://aplayer.moefe.org/
License: MIT License
Hi, my case is as follows:
通过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) //这里打印两个音频名称不一样,确认调用过函数
}
}
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!
默认模式的播放列表是向下展开的,在不使用吸底模式的情况下怎么才能让播放列表向上展开
有三个地方用到player组件,但是只有一处有问题,在点击播放的时候点不动,打印一下play事件,原来是执行play()方法以后又立即执行pause(),如何解决呢?感谢作者
歌词文件如果有多个
有vue3版本的吗
我用的单文件模式
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')
}]
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
我就是按照你的api写的;可是不对 https://aplayer.netlify.com/docs/guide/
我尝试在每次打开时都清除缓存中的aplayer-setting,但是完全没有用
Please check how to avoid the error.
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,
}
})```
大佬大佬, 啥时候抽空适配一下vue3呀
大佬大佬, 啥时候抽空适配一下vue3呀
大佬大佬, 啥时候抽空适配一下vue3呀
2.0 版本基于 APlayer v1.10.1 最新版重写,尽量与 APlayer 保持一致,最小化差异
新功能
改进
BUG 修复
破坏性更改
lrcType
来指定歌词使用什么方式获取fold
重命名为 listFolded
listmaxheight
重命名为 listMaxHeight
工作流
@vue/cli
到 3.0.0-rc.10完成进度
看 Aplayer 的 docu ,music 應該是對應到 audio 的部分
但 audio 的描述寫 audio info, should be an object or object array
嘗試加進一個object array 會報錯, error 表示只能是 object,
看 type 資料夾裡的定義,好像就真的只能是一個 object。
這樣的話只能傳一首歌進去,那該怎麽建立一個歌單?
Hi, can you provide documentation in English and also for ts typings?
Thanks.
:autoplay="true"就不会自动播放,否则自动播放
Hi does the playlist support customization?
我确定的是2.x版本需要这样注册组件,1.x不确定,没这样用过。
Vue.use(VueAPlayer.default, {
defaultCover: '',
productionTip: true
});
有的音频报the operation is not supported
比如在调用这个this.$refs.aplayer.play()时传入一个参数如歌名,去播放这首歌
Can you add an option to disable loading the localStorage stored settings for the player ?
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.
会提示
play() failed because the user didn;t interact with document.
我是在pc端的chrome打开的
vue.esm.js?65d7:179 Uncaught (in promise) TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
我用文档里的单文件组件方法安装的,但是调用api的时候发现都不能用,chrome控制台显示:
"TypeError: Cannot read property 'toggleList' of undefined",而$.refs空对象,是因为这个安装方法不能使用api吗,必须使用 vue-class-component?
vue-aplayer/docs/.vuepress/enhanceApp.js
Lines 7 to 11 in 5c6f29c
就是上面这一段,找了好久,否则会报错 ReferenceError: document is not defined
.
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个方法:
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"
]
}
type __APlayer_Type_Import__ = typeof import("@moefe/vue-aplayer/types/aplayer");
由于aplayer.d.ts
用了declare global
的方式,只需要包含类型引入,不必关心实际导入的类型。
为了让这些类型定义可以正确的使用,建议修改声明文件的编写方式,可以参考vue的写法。
我个人推荐的使用方式是:
aplayer.d.ts
去除declare global 以及namespace,直接导出所有接口index.d.ts
中导入所有接口,并重新export,这样这些接口可以单独importnamespace APlayer
包含这些接口,然后导出namespace,此时导出APlayer
既是class也是namespaceimport * as APlayerType from "./aplayer";
export * from "./aplayer";
export as namespace APlayer;
export class APlayer extends Vue.Component<APlayerType.Options, APlayerType.Events> {
// ...
}
import { APlayer, Audio, LrcType } from "@moefe/vue-aplayer";
player!: APlayer; // OK
audio1: APlayer.Audio = { }; // 可以按原来的方法用
audio2: Audio = { }; // 也可以直接用
稍后提交pr
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.