Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

添加了全新的模式:fixedBar,并添加/优化了几个小功能 - Added a new mode: fixedBar & added some functions #696

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

Eling486
Copy link

@Eling486 Eling486 commented May 9, 2021

UPDATE: 现在下述功能已独立为APlayer-Ex, 可直接点击访问仓库地址:https://github.com/Eling486/APlayer-Ex/tree/main


因为更新内容较多,且部分优化不足(因为添加的功能主要是为了解决我的个人需求,所以代码没有进行过多优化),使打包后的js文件达到了108KB,所以我感觉这个PR不会被通过TAT,但是如果我的更新的内容包括你想要使用的功能,可以直接到我的分支里下载打包后的js文件:APlayer.min.js,如果你能帮助我进行优化,那么感激不尽!仓库地址:APlayer (https://github.com/Eling486/APlayer)


新模式:fixedBar - New mode: fixedBar

使用方法 - How to use it? :

const ap = new APlayer({
    container: document.getElementById('player'),
    fixedBar: true,
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg',
    }]
});

效果 - What does it look like? :

以及播放列表样式 - & the style of its play list:

新功能 - New functions

默认封面&标题 - defaultTitle & defaultCover

You can set the default title & cover now.

你现在可以设置默认的封面及标题了!

such as:

const ap = new APlayer({
    container: document.getElementById('player'),
    defaultTitle: 'Your Title', // Default: 'No audio'
    defaultCover: 'Your_Image.jpg',
});

保存播放列表到localStorage - store your play list to localStorage

设置storeList参数为true来让播放器保存播放列表到localStorage

只在fixedBar(吸底播放栏)模式下推荐使用(因为其他模式下没有清空播放列表按钮)

推荐同时设置storageName来避免与其他播放器冲突

Setting storeList to save your play list to localStorage.

ONLY recommended in the fixedBar mode! (Because there are NOT [Clear the playlist] button in other modes.)

It is recommended to set storagename at the same time to avoid conflicts with other APlayers.

const ap = new APlayer({
    container: document.getElementById('player'),
    fixedBar: true,
    storageName: 'my-aplayer',
    storeList: true,
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg',
    }]
});

设置歌词字号 - Set the font size for your lrc

你现在可以通过lrcFontSize自定义lrc歌词的字号了!

You can set the font size of lrc by lrcFontSize now.

const ap = new APlayer({
    container: document.getElementById('player'),
    lrcFontSize: 18,
});

注意:播放器的高度会随字号大小发生变化,请注意进行调试!

设置歌词出错时/加载时的提示消息文本 - Set the defaultLrcErrText & defaultLrcLoadingText

你可以自定义lrc歌词在出错、未找到歌词时,在歌词位置显示的默认文本了!

You can set defaultLrcErrText & defaultLrcLoadingText to what you want to show!

const ap = new APlayer({
    container: document.getElementById('player'),
    defaultLrcErrText: '纯音乐,请欣赏', // Default: 'Not available'
    defaultLrcLoadingText: '歌词加载中', // Default: 'Loading'
});

你也可以将lrcErrNotice设置为false来禁用当歌词出错时的播放器消息提示。

You can also set the lrcErrNotice to false to disable error notice

such as:

const ap = new APlayer({
    container: document.getElementById('player'),
    lrcErrNotice: false
});

@itxve
Copy link

itxve commented Apr 15, 2022

我直接打包就到了接近100k😱

@Eling486
Copy link
Author

我直接打包就到了接近100k😱

这个确实……因为没有做太多优化,样式实现是直接新建了个模板,打包时基本不会压缩,就导致js整体大小会多很多。。所以最开始说如果有人愿意来优化就最好了哈哈哈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants