Move from miccall theme to kaze
This commit is contained in:
580
aplayer/docs/README.html
Normal file
580
aplayer/docs/README.html
Normal file
@@ -0,0 +1,580 @@
|
||||
<hr>
|
||||
<h2 id="search-english"><a href="#search-english" class="headerlink" title="search: english"></a>search: english</h2><h1 id="APlayer"><a href="#APlayer" class="headerlink" title="APlayer"></a>APlayer</h1><p>🍭 Wow, such a beautiful HTML5 music player</p>
|
||||
<h2 id="Special-Sponsors"><a href="#Special-Sponsors" class="headerlink" title="Special Sponsors"></a>Special Sponsors</h2><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://www.upyun.com/" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
<h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><p>Using npm:</p>
|
||||
<pre><code>npm install aplayer --save
|
||||
</code></pre>
|
||||
<p>Using Yarn:</p>
|
||||
<pre><code>yarn add aplayer
|
||||
</code></pre>
|
||||
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><div class="aplayer-wrap">
|
||||
<div id="aplayer2"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="aplayer"></div>
|
||||
<script src="APlayer.min.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
audio: [{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg'
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<p>Work with module bundler:</p>
|
||||
<pre><code class="js">import 'aplayer/dist/APlayer.min.css';
|
||||
import APlayer from 'aplayer';
|
||||
|
||||
const ap = new APlayer(options);
|
||||
</code></pre>
|
||||
<h2 id="Options"><a href="#Options" class="headerlink" title="Options"></a>Options</h2><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody><tr>
|
||||
<td>container</td>
|
||||
<td>document.querySelector(‘.aplayer’)</td>
|
||||
<td>player container</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fixed</td>
|
||||
<td>false</td>
|
||||
<td>enable fixed mode, <a href="https://aplayer.js.org/#/home?id=fixed-mode">see more details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mini</td>
|
||||
<td>false</td>
|
||||
<td>enable mini mode, <a href="https://aplayer.js.org/#/home?id=mini-mode">see more details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoplay</td>
|
||||
<td>false</td>
|
||||
<td>audio autoplay</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme</td>
|
||||
<td>‘#b7daff’</td>
|
||||
<td>main color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>loop</td>
|
||||
<td>‘all’</td>
|
||||
<td>player loop play, values: ‘all’, ‘one’, ‘none’</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>order</td>
|
||||
<td>‘list’</td>
|
||||
<td>player play order, values: ‘list’, ‘random’</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>preload</td>
|
||||
<td>‘auto’</td>
|
||||
<td>values: ‘none’, ‘metadata’, ‘auto’</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>volume</td>
|
||||
<td>0.7</td>
|
||||
<td>default volume, notice that player will remember user setting, default volume will not work after user set volume themselves</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio</td>
|
||||
<td>-</td>
|
||||
<td>audio info, should be an object or object array</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.name</td>
|
||||
<td>-</td>
|
||||
<td>audio name</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.artist</td>
|
||||
<td>-</td>
|
||||
<td>audio artist</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.url</td>
|
||||
<td>-</td>
|
||||
<td>audio url</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.cover</td>
|
||||
<td>-</td>
|
||||
<td>audio cover</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.lrc</td>
|
||||
<td>-</td>
|
||||
<td><a href="https://aplayer.js.org/#/home?id=lrc">see more details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.theme</td>
|
||||
<td>-</td>
|
||||
<td>main color when switching to this audio, it has priority over the above theme</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.type</td>
|
||||
<td>‘auto’</td>
|
||||
<td>values: ‘auto’, ‘hls’, ‘normal’ or other custom type, <a href="https://aplayer.js.org/#/home?id=mse-support">see more details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customAudioType</td>
|
||||
<td>-</td>
|
||||
<td><a href="https://aplayer.js.org/#/home?id=mse-support">see more details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mutex</td>
|
||||
<td>true</td>
|
||||
<td>prevent to play multiple player at the same time, pause other players when this player start play</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lrcType</td>
|
||||
<td>0</td>
|
||||
<td><a href="https://aplayer.js.org/#/home?id=lrc">see more details</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>listFolded</td>
|
||||
<td>false</td>
|
||||
<td>indicate whether list should folded at first</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>listMaxHeight</td>
|
||||
<td>-</td>
|
||||
<td>list max height</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>storageName</td>
|
||||
<td>‘aplayer-setting’</td>
|
||||
<td>localStorage key that store player setting</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<p>For example:</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer3"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
mini: false,
|
||||
autoplay: false,
|
||||
theme: '#FADFA3',
|
||||
loop: 'all',
|
||||
order: 'random',
|
||||
preload: 'auto',
|
||||
volume: 0.7,
|
||||
mutex: true,
|
||||
listFolded: false,
|
||||
listMaxHeight: 90,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg',
|
||||
lrc: 'lrc1.lrc',
|
||||
theme: '#ebd0c2'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg',
|
||||
lrc: 'lrc2.lrc',
|
||||
theme: '#46718b'
|
||||
}
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><ul>
|
||||
<li><p><code>APlayer.version</code>: static property, return the version of APlayer</p>
|
||||
</li>
|
||||
<li><p><code>ap.play()</code>: play audio</p>
|
||||
</li>
|
||||
<li><p><code>ap.pause()</code>: pause audio</p>
|
||||
</li>
|
||||
<li><p><code>ap.seek(time: number)</code>: seek to specified time, the unit of time is second</p>
|
||||
<pre><code class="js">ap.seek(100);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.toggle()</code>: toggle between play and pause</p>
|
||||
</li>
|
||||
<li><p><code>ap.on(event: string, handler: function)</code>: bind audio and player events, <a href="https://aplayer.js.org/#/home?id=event-binding">see more details</a></p>
|
||||
</li>
|
||||
<li><p><code>ap.volume(percentage: number, nostorage: boolean)</code>: set audio volume</p>
|
||||
<pre><code class="js">ap.volume(0.1, true);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.theme(color: string, index: number)</code>: set player theme, the default of index is current audio index</p>
|
||||
<pre><code class="js">ap.theme('#000', 0);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.setMode(mode: string)</code>: set player mode, the value of mode should be ‘mini’ or ‘normal’</p>
|
||||
</li>
|
||||
<li><p><code>ap.mode</code>: return current player mode, ‘mini’ or ‘normal’</p>
|
||||
</li>
|
||||
<li><p><code>ap.notice(text: string, time: number, opacity: number)</code>: show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8, setting time to 0 can disable notice autohide.</p>
|
||||
<pre><code class="js">ap.notice('Amazing player', 2000, 0.8);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.skipBack()</code>: skip to previous audio</p>
|
||||
</li>
|
||||
<li><p><code>ap.skipForward()</code>: skip to next audio</p>
|
||||
</li>
|
||||
<li><p><code>ap.destroy()</code>: destroy player</p>
|
||||
</li>
|
||||
<li><p><code>ap.lrc</code></p>
|
||||
<ul>
|
||||
<li><p><code>ap.lrc.show()</code>: show lrc</p>
|
||||
</li>
|
||||
<li><p><code>ap.lrc.hide()</code>: hide lrc</p>
|
||||
</li>
|
||||
<li><p><code>ap.lrc.toggle()</code>: toggle lrc between show and hide</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p><code>ap.list</code></p>
|
||||
<ul>
|
||||
<li><p><code>ap.list.show()</code>: show list</p>
|
||||
</li>
|
||||
<li><p><code>ap.list.hide()</code>: hide list</p>
|
||||
</li>
|
||||
<li><p><code>ap.list.toggle()</code>: toggle list between show and hide</p>
|
||||
</li>
|
||||
<li><p><code>ap.list.add(audios: array | object)</code>: add new audios to the list</p>
|
||||
</li>
|
||||
</ul>
|
||||
<pre><code class="js">ap.list.add([{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
lrc: 'lrc.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}]);
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li><code>ap.list.remove(index: number)</code>: remove an audio from the list</li>
|
||||
</ul>
|
||||
<pre><code class="js">ap.list.remove(1);
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li><code>ap.list.switch()</code>: switch to an audio in the list</li>
|
||||
</ul>
|
||||
<pre><code class="js">ap.list.switch(1);
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li><code>ap.list.clear()</code>: remove all audios from the list</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p><code>ap.audio</code>: native audio</p>
|
||||
</li>
|
||||
<li><p><code>ap.audio.currentTime</code>: returns the current playback position</p>
|
||||
</li>
|
||||
<li><p><code>ap.audio.duration</code>: returns audio total time</p>
|
||||
</li>
|
||||
<li><p><code>ap.audio.paused</code>: returns whether the audio paused</p>
|
||||
</li>
|
||||
<li><p>most <a href="http://www.w3schools.com/tags/ref_av_dom.asp">native api</a> are supported</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="Event-binding"><a href="#Event-binding" class="headerlink" title="Event binding"></a>Event binding</h2><p><code>ap.on(event, handler)</code></p>
|
||||
<pre><code class="js">ap.on('ended', function () {
|
||||
console.log('player ended');
|
||||
});
|
||||
</code></pre>
|
||||
<p>Audio events</p>
|
||||
<ul>
|
||||
<li>abort</li>
|
||||
<li>canplay</li>
|
||||
<li>canplaythrough</li>
|
||||
<li>durationchange</li>
|
||||
<li>emptied</li>
|
||||
<li>ended</li>
|
||||
<li>error</li>
|
||||
<li>loadeddata</li>
|
||||
<li>loadedmetadata</li>
|
||||
<li>loadstart</li>
|
||||
<li>mozaudioavailable</li>
|
||||
<li>pause</li>
|
||||
<li>play</li>
|
||||
<li>playing</li>
|
||||
<li>progress</li>
|
||||
<li>ratechange</li>
|
||||
<li>seeked</li>
|
||||
<li>seeking</li>
|
||||
<li>stalled</li>
|
||||
<li>suspend</li>
|
||||
<li>timeupdate</li>
|
||||
<li>volumechange</li>
|
||||
<li>waiting</li>
|
||||
</ul>
|
||||
<p>Player events</p>
|
||||
<ul>
|
||||
<li>listshow</li>
|
||||
<li>listhide</li>
|
||||
<li>listadd</li>
|
||||
<li>listremove</li>
|
||||
<li>listswitch</li>
|
||||
<li>listclear</li>
|
||||
<li>noticeshow</li>
|
||||
<li>noticehide</li>
|
||||
<li>destroy</li>
|
||||
<li>lrcshow</li>
|
||||
<li>lrchide</li>
|
||||
</ul>
|
||||
<h2 id="LRC"><a href="#LRC" class="headerlink" title="LRC"></a>LRC</h2><p>We have three ways to pass LRC to APlayer, indicate the way to pass LRC by option <code>lrcType</code>, then put lrc to option <code>audio.lrc</code> or HTML.</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer4"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<h3 id="LRC-file"><a href="#LRC-file" class="headerlink" title="LRC file"></a>LRC file</h3><p>The first way, put LRC to a LRC file, LRC file will be loaded when this audio start to play.</p>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrcType: 3,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'demo.mp3',
|
||||
cover: 'demo.jpg',
|
||||
lrc: 'lrc.lrc'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h3 id="LRC-string-in-JS"><a href="#LRC-string-in-JS" class="headerlink" title="LRC string in JS"></a>LRC string in JS</h3><p>The second way, put LRC to a JS string.</p>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrcType: 1,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'demo.mp3',
|
||||
cover: 'demo.jpg',
|
||||
lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h3 id="LRC-in-HTML"><a href="#LRC-in-HTML" class="headerlink" title="LRC in HTML"></a>LRC in HTML</h3><p>The third way, put LRC to HTML.</p>
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="player">
|
||||
<pre class="aplayer-lrc-content">
|
||||
[00:00.00]APlayer audio1
|
||||
[00:04.01]is
|
||||
[00:08.02]amazing
|
||||
<!-- ... -->
|
||||
</pre>
|
||||
<pre class="aplayer-lrc-content">
|
||||
[00:00.00]APlayer audio2
|
||||
[00:04.01]is
|
||||
[00:08.02]amazing
|
||||
<!-- ... -->
|
||||
</pre>
|
||||
</div>
|
||||
<script src="APlayer.min.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrcType: 2,
|
||||
audio: [[
|
||||
{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg'
|
||||
}
|
||||
]]
|
||||
});
|
||||
</code></pre>
|
||||
<h3 id="LRC-format"><a href="#LRC-format" class="headerlink" title="LRC format"></a>LRC format</h3><p>The following LRC format are supported:</p>
|
||||
<p><code>[mm:ss]APlayer</code></p>
|
||||
<p><code>[mm:ss.xx]is</code></p>
|
||||
<p><code>[mm:ss.xxx]amazing</code></p>
|
||||
<p><code>[mm:ss.xx][mm:ss.xx]APlayer</code></p>
|
||||
<p><code>[mm:ss.xx]<mm:ss.xx>is</code></p>
|
||||
<p><code>[mm:ss.xx]amazing[mm:ss.xx]APlayer</code></p>
|
||||
<h2 id="Playlist"><a href="#Playlist" class="headerlink" title="Playlist"></a>Playlist</h2><p>APlayer will show a playlist when it has more than one audio, option <code>listFolded</code> indicates whether list should folded at first, and option <code>listMaxHeight</code> indicates list max height.</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer5"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
listFolded: false,
|
||||
listMaxHeight: 90,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg',
|
||||
lrc: 'lrc1.lrc',
|
||||
theme: '#ebd0c2'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg',
|
||||
lrc: 'lrc2.lrc',
|
||||
theme: '#46718b'
|
||||
}
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="Fixed-mode"><a href="#Fixed-mode" class="headerlink" title="Fixed mode"></a>Fixed mode</h2><p>APlayer can be fixed to page bottom via fixed mode, fixed mode is a very different mode, enjoy it!</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer9"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
fixed: true,
|
||||
audio: [{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="Mini-mode"><a href="#Mini-mode" class="headerlink" title="Mini mode"></a>Mini mode</h2><p>If you don’t have enough space for normal player, mini mode might be your choice.</p>
|
||||
<p>Please note that mini mode is conflicted with fixed mode.</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer6"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
mini: true,
|
||||
audio: [{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="MSE-support"><a href="#MSE-support" class="headerlink" title="MSE support"></a>MSE support</h2><h3 id="HLS"><a href="#HLS" class="headerlink" title="HLS"></a>HLS</h3><p>It requires the library <a href="https://github.com/video-dev/hls.js">hls.js</a> and it should be loaded before <code>APlayer.min.js</code>.</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer7"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="aplayer"></div>
|
||||
<script src="hls.min.js"></script>
|
||||
<script src="APlayer.min.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
audio: [{
|
||||
name: 'HLS',
|
||||
artist: 'artist',
|
||||
url: 'url.m3u8',
|
||||
cover: 'cover.jpg',
|
||||
type: 'hls'
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<pre><code class="js">// another way, use customType
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
audio: [{
|
||||
name: 'HLS',
|
||||
artist: 'artist',
|
||||
url: 'url.m3u8',
|
||||
cover: 'cover.jpg',
|
||||
type: 'customHls'
|
||||
}],
|
||||
customAudioType: {
|
||||
'customHls': function (audioElement, audio, player) {
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls();
|
||||
hls.loadSource(audio.url);
|
||||
hls.attachMedia(audioElement);
|
||||
}
|
||||
else if (audioElement.canPlayType('application/x-mpegURL') || audioElement.canPlayType('application/vnd.apple.mpegURL')) {
|
||||
audioElement.src = audio.url;
|
||||
}
|
||||
else {
|
||||
player.notice('Error: HLS is not supported.');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="Self-adapting-theme-according-to-cover"><a href="#Self-adapting-theme-according-to-cover" class="headerlink" title="Self-adapting theme according to cover"></a>Self-adapting theme according to cover</h2><p>It requires the library <a href="https://github.com/lokesh/color-thief/blob/master/src/color-thief.js">color-thief</a>.</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer8"><button class="docute-button load">Click to load player</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="aplayer"></div>
|
||||
<script src="APlayer.min.js"></script>
|
||||
<script src="color-thief.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
theme: '#e9e9e9',
|
||||
audio: [{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg'
|
||||
}, {
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg'
|
||||
}]
|
||||
});
|
||||
|
||||
const colorThief = new ColorThief();
|
||||
const image = new Image();
|
||||
const xhr = new XMLHttpRequest();
|
||||
const setTheme = (index) => {
|
||||
if (!ap.list.audios[index].theme) {
|
||||
xhr.onload = function(){
|
||||
let coverUrl = URL.createObjectURL(this.response);
|
||||
image.onload = function(){
|
||||
let color = colorThief.getColor(image);
|
||||
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
|
||||
URL.revokeObjectURL(coverUrl)
|
||||
};
|
||||
image.src = coverUrl;
|
||||
}
|
||||
xhr.open('GET', ap.list.audios[index].cover, true);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.send();
|
||||
}
|
||||
};
|
||||
setTheme(ap.list.index);
|
||||
ap.on('listswitch', (index) => {
|
||||
setTheme(index);
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><ul>
|
||||
<li><a href="https://www.jsdelivr.com/package/npm/aplayer">jsDelivr</a></li>
|
||||
<li><a href="https://cdnjs.com/libraries/aplayer">cdnjs</a></li>
|
||||
<li><a href="https://unpkg.com/aplayer/">unpkg</a></li>
|
||||
</ul>
|
||||
<h2 id="FAQ"><a href="#FAQ" class="headerlink" title="FAQ"></a>FAQ</h2><h3 id="Why-can’t-player-autoplay-in-some-mobile-browsers"><a href="#Why-can’t-player-autoplay-in-some-mobile-browsers" class="headerlink" title="Why can’t player autoplay in some mobile browsers?"></a>Why can’t player autoplay in some mobile browsers?</h3><p>Most mobile browsers forbid audio autoplay, you wont be able to achieve it without hacks.</p>
|
||||
343
aplayer/docs/config.js
Normal file
343
aplayer/docs/config.js
Normal file
@@ -0,0 +1,343 @@
|
||||
const langs = [
|
||||
{ title: 'English', path: '/home', matchPath: /^\/(home|ecosystem|support)/ },
|
||||
{ title: '简体中文', path: '/zh-Hans/', matchPath: /^\/zh-Hans/ },
|
||||
];
|
||||
|
||||
docute.init({
|
||||
landing: 'landing.html',
|
||||
title: 'APlayer',
|
||||
repo: 'DIYgod/APlayer',
|
||||
twitter: 'DIYgod',
|
||||
'edit-link': 'https://github.com/MoePlayer/APlayer/tree/master/docs',
|
||||
nav: {
|
||||
default: [
|
||||
{
|
||||
title: 'Home', path: '/home'
|
||||
},
|
||||
{
|
||||
title: 'Ecosystem', path: '/ecosystem'
|
||||
},
|
||||
{
|
||||
title: 'Support APlayer', path: '/support'
|
||||
},
|
||||
{
|
||||
title: 'Languages', type: 'dropdown', items: langs
|
||||
}
|
||||
],
|
||||
'zh-Hans': [
|
||||
{
|
||||
title: '首页', path: '/zh-Hans/'
|
||||
},
|
||||
{
|
||||
title: '生态', path: '/zh-Hans/ecosystem'
|
||||
},
|
||||
{
|
||||
title: '支持 APlayer', path: '/zh-Hans/support'
|
||||
},
|
||||
{
|
||||
title: '选择语言', type: 'dropdown', items: langs
|
||||
}
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
docsearch({
|
||||
apiKey: '',
|
||||
indexName: 'aplayer',
|
||||
tags: ['english', 'zh-Hans'],
|
||||
url: 'https://aplayer.js.org'
|
||||
}),
|
||||
evanyou(),
|
||||
player()
|
||||
]
|
||||
});
|
||||
|
||||
function player () {
|
||||
return function (context) {
|
||||
context.event.on('landing:updated', function () {
|
||||
console.log('landing:updated');
|
||||
clearPlayer();
|
||||
aplayer0();
|
||||
aplayer1();
|
||||
});
|
||||
context.event.on('content:updated', function () {
|
||||
console.log('content:updated');
|
||||
clearPlayer();
|
||||
for (let i = 0; i < document.querySelectorAll('.load').length; i++) {
|
||||
document.querySelectorAll('.load')[i].addEventListener('click', function () {
|
||||
window[this.parentElement.id] && window[this.parentElement.id]();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function clearPlayer () {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (window['ap' + i]) {
|
||||
window['ap' + i].destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function aplayer1 () {
|
||||
window.ap1 = new APlayer({
|
||||
container: document.getElementById('aplayer1'),
|
||||
theme: '#F57F17',
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}, {
|
||||
name: 'トリカゴ',
|
||||
artist: 'XX:me',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
|
||||
theme: '#46718b'
|
||||
}, {
|
||||
name: '前前前世',
|
||||
artist: 'RADWIMPS',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
|
||||
theme: '#505d6b'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer0 () {
|
||||
window.ap0 = new APlayer({
|
||||
container: document.getElementById('aplayer0'),
|
||||
fixed: true,
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '前前前世',
|
||||
artist: 'RADWIMPS',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
|
||||
theme: '#505d6b'
|
||||
}, {
|
||||
name: 'トリカゴ',
|
||||
artist: 'XX:me',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
|
||||
theme: '#46718b'
|
||||
}, {
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer2 () {
|
||||
window.ap2 = new APlayer({
|
||||
container: document.getElementById('aplayer2'),
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
theme: '#ebd0c2'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer3 () {
|
||||
window.ap3 = new APlayer({
|
||||
container: document.getElementById('aplayer3'),
|
||||
mini: false,
|
||||
autoplay: false,
|
||||
loop: 'all',
|
||||
order: 'random',
|
||||
preload: 'auto',
|
||||
volume: 0.7,
|
||||
mutex: true,
|
||||
listFolded: false,
|
||||
listMaxHeight: 90,
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}, {
|
||||
name: 'トリカゴ',
|
||||
artist: 'XX:me',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
|
||||
theme: '#46718b'
|
||||
}, {
|
||||
name: '前前前世',
|
||||
artist: 'RADWIMPS',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
|
||||
theme: '#505d6b'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer4 () {
|
||||
window.ap4 = new APlayer({
|
||||
container: document.getElementById('aplayer4'),
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer5 () {
|
||||
window.ap5 = new APlayer({
|
||||
container: document.getElementById('aplayer5'),
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}, {
|
||||
name: 'トリカゴ',
|
||||
artist: 'XX:me',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
|
||||
theme: '#46718b'
|
||||
}, {
|
||||
name: '前前前世',
|
||||
artist: 'RADWIMPS',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
|
||||
theme: '#505d6b'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer6 () {
|
||||
window.ap6 = new APlayer({
|
||||
container: document.getElementById('aplayer6'),
|
||||
mini: true,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
theme: '#ebd0c2'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer7 () {
|
||||
window.ap7 = new APlayer({
|
||||
container: document.getElementById('aplayer7'),
|
||||
audio: [{
|
||||
name: '光るなら(HLS)',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hls/hikarunara.m3u8',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
theme: '#ebd0c2',
|
||||
type: 'hls'
|
||||
}, {
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
theme: '#ebd0c2'
|
||||
}, {
|
||||
name: 'トリカゴ',
|
||||
artist: 'XX:me',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
|
||||
theme: '#46718b'
|
||||
}, {
|
||||
name: '前前前世',
|
||||
artist: 'RADWIMPS',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
|
||||
theme: '#505d6b'
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer8 () {
|
||||
window.ap8 = new APlayer({
|
||||
container: document.getElementById('aplayer8'),
|
||||
theme: '#e9e9e9',
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
}, {
|
||||
name: 'トリカゴ',
|
||||
artist: 'XX:me',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
|
||||
}, {
|
||||
name: '前前前世',
|
||||
artist: 'RADWIMPS',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
|
||||
}]
|
||||
});
|
||||
|
||||
const colorThief = new ColorThief();
|
||||
window.ap8.on('switchaudio', function (index) {
|
||||
if (!window.ap8.options.audio[index].theme) {
|
||||
colorThief.getColorAsync(window.ap8.options.audio[index].cover, function (color) {
|
||||
window.ap8.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function aplayer9 () {
|
||||
window.ap9 = new APlayer({
|
||||
container: document.getElementById('aplayer9'),
|
||||
fixed: true,
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}, {
|
||||
name: 'トリカゴ',
|
||||
artist: 'XX:me',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/darling.lrc',
|
||||
theme: '#46718b'
|
||||
}, {
|
||||
name: '前前前世',
|
||||
artist: 'RADWIMPS',
|
||||
url: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.mp3',
|
||||
cover: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.jpg',
|
||||
lrc: 'https://cn-south-17-aplayer-46154810.oss.dogecdn.com/yourname.lrc',
|
||||
theme: '#505d6b'
|
||||
}]
|
||||
});
|
||||
}
|
||||
38
aplayer/docs/ecosystem.html
Normal file
38
aplayer/docs/ecosystem.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<hr>
|
||||
<h2 id="search-english"><a href="#search-english" class="headerlink" title="search: english"></a>search: english</h2><h1 id="Ecosystem"><a href="#Ecosystem" class="headerlink" title="Ecosystem"></a>Ecosystem</h1><p>Let’s make APlayer better, feel free to submit yours in <a href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a></p>
|
||||
<h2 id="Help"><a href="#Help" class="headerlink" title="Help"></a>Help</h2><h3 id="Joining-the-Discussion"><a href="#Joining-the-Discussion" class="headerlink" title="Joining the Discussion"></a>Joining the Discussion</h3><ul>
|
||||
<li><a href="https://t.me/adplayer">Telegram Group</a></li>
|
||||
<li><a href="https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17">QQ Group</a>: 415835947</li>
|
||||
</ul>
|
||||
<h3 id="Creating-issue"><a href="#Creating-issue" class="headerlink" title="Creating issue"></a>Creating issue</h3><ul>
|
||||
<li><a href="https://github.com/MoePlayer/APlayer/issues">MoePlayer/APlayer/issues</a></li>
|
||||
</ul>
|
||||
<h2 id="Related-Projects"><a href="#Related-Projects" class="headerlink" title="Related Projects"></a>Related Projects</h2><h3 id="Plugins"><a href="#Plugins" class="headerlink" title="Plugins"></a>Plugins</h3><ul>
|
||||
<li><a href="https://github.com/zgq354/APlayer-Typecho-Plugin">APlayer-Typecho-Plugin</a>: Typecho</li>
|
||||
<li><a href="https://github.com/grzhan/hexo-tag-aplayer">hexo-tag-aplayer</a>: Hexo</li>
|
||||
<li><a href="https://github.com/liwanglin12/Hermit-X">Hermit-X(APlayer for WordPress)</a>: WordPress</li>
|
||||
<li><a href="https://github.com/kn007/APlayerHandle">APlayerHandle</a>: WordPress</li>
|
||||
<li><a href="https://github.com/fghrsh/APlayer_for_Z-BlogPHP">APlayer_for_Z-BlogPHP</a>: Z-BlogPHP</li>
|
||||
<li><a href="https://github.com/sabrinaluo/react-aplayer">react-aplayer</a>: React</li>
|
||||
<li><a href="https://github.com/SevenOutman/vue-aplayer">Vue-APlayer</a>: Vue</li>
|
||||
<li><a href="https://github.com/MoeFE/vue-aplayer">vue-aplayer</a>: Vue</li>
|
||||
<li><a href="https://github.com/Daryl-L/php-aplayer">php-aplayer</a>: PHP</li>
|
||||
</ul>
|
||||
<h3 id="Tooling"><a href="#Tooling" class="headerlink" title="Tooling"></a>Tooling</h3><ul>
|
||||
<li><a href="https://github.com/Mashiro-Sorata/APlayer-Controler">APlayer-Controler</a>: controling tool</li>
|
||||
<li><a href="https://github.com/metowolf/MetingJS">MetingJS</a>: work with Meting music API</li>
|
||||
</ul>
|
||||
<h2 id="Who-use-APlayer"><a href="#Who-use-APlayer" class="headerlink" title="Who use APlayer?"></a>Who use APlayer?</h2><ul>
|
||||
<li><a href="https://www.bilibili.com/">bilibili</a>: 国内知名的视频弹幕网站</li>
|
||||
<li><a href="https://hacpai.com/">黑客派</a>: 程序员和设计师的聚集地，一个活跃的小众社区</li>
|
||||
<li><a href="https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B">浙江大学CC98论坛</a>: 浙江大学校网内规模最大的论坛，中国各大学中较活跃的BBS之一</li>
|
||||
<li><a href="http://jellyrue.com/">Jelly Rue</a>: Jelly Rue, an indie pop-rock band from Tartu.</li>
|
||||
<li><a href="http://www.opusopus.co/">Opus</a>: An artist-exploration data visualization application</li>
|
||||
<li><a href="http://www.chinaz.com/15year/index.html">站长之家</a>: 针对中文站点提供资讯、技术、资源、服务</li>
|
||||
<li><a href="https://www.lovelivesupport.com/">LLSupport</a>: This site provides a lot of information about LoveLive</li>
|
||||
<li><a href="https://www.lrcgc.com/diy">歌词千寻</a>: 每日更新的LRC歌词网站</li>
|
||||
<li><a href="http://i.oppsu.cn/">iSearch</a>: 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台</li>
|
||||
<li><a href="https://github.com/MoeFE/Lyric">LRC歌词编辑器</a>: 一款非常实用的在线LRC歌词编辑器</li>
|
||||
<li><a href="https://aerostatica.ru/">Аэростатика</a></li>
|
||||
<li><a href="https://healthdig.co/">HealthDig</a>: 每天只需两分钟的重点新闻资讯</li>
|
||||
</ul>
|
||||
49
aplayer/docs/index.html
Normal file
49
aplayer/docs/index.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<title>APlayer</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/theme-github.css" />
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48084758-8"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-48084758-8');
|
||||
</script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
|
||||
<style>
|
||||
body {
|
||||
text-rendering: auto;
|
||||
}
|
||||
#evanyou-canvas {
|
||||
z-index: -1 !important;
|
||||
}
|
||||
.aplayer-wrap {
|
||||
max-width: 700px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.sidebar-toggle {
|
||||
z-index: 90;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- don't remove this part start -->
|
||||
<div id="app"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/plugins/docsearch.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute-evanyou/dist/evanyou.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<!-- livereload script placeholder -->
|
||||
<!-- don't remove this part end -->
|
||||
</body>
|
||||
</html>
|
||||
84
aplayer/docs/landing.html
Normal file
84
aplayer/docs/landing.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<h1>APlayer</h1>
|
||||
|
||||
<h3>🍭 Wow, such a beautiful HTML5 music player.</h3>
|
||||
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer1"></div>
|
||||
</div>
|
||||
<div id="aplayer0"></div>
|
||||
|
||||
<div class="landing-buttons">
|
||||
<a class="landing-button" target="_blank" href="https://github.com/MoePlayer/APlayer">
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a class="landing-button" router-link="/home">
|
||||
Docs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0;
|
||||
margin-top: -50px;
|
||||
font-weight: normal;
|
||||
font-size: 40px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.landing {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.landing-button {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 33px;
|
||||
padding: 10px 30px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.landing-button:hover {
|
||||
border-color: #42b983;
|
||||
color: #42b983;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.aplayer-wrap {
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
margin: 20px 0 40px;
|
||||
}
|
||||
</style>
|
||||
27
aplayer/docs/support.html
Normal file
27
aplayer/docs/support.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<hr>
|
||||
<h2 id="search-english"><a href="#search-english" class="headerlink" title="search: english"></a>search: english</h2><h1 id="Sponsor-APlayer-Development"><a href="#Sponsor-APlayer-Development" class="headerlink" title="Sponsor APlayer Development"></a>Sponsor APlayer Development</h1><p>APlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.</p>
|
||||
<p>If you run a business and are using APlayer in a revenue-generating product, it makes business sense to sponsor APlayer development: it ensures the project that your product relies on stays healthy and actively maintained.</p>
|
||||
<p>If you are an individual user and have enjoyed the productivity of using APlayer, consider donating as a sign of appreciation - like buying me coffee once in a while :)</p>
|
||||
<p>You can support APlayer development via the following methods:</p>
|
||||
<h2 id="One-time-Donations"><a href="#One-time-Donations" class="headerlink" title="One-time Donations"></a>One-time Donations</h2><p>We accept donations through these channels:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.paypal.me/DIYgod">Paypal</a></li>
|
||||
<li><a href="https://i.imgur.com/aq6PtWa.png">WeChat Pay</a></li>
|
||||
<li><a href="https://i.imgur.com/wv1Pj2k.png">Alipay</a></li>
|
||||
<li>Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1</li>
|
||||
</ul>
|
||||
<h2 id="Recurring-Pledges"><a href="#Recurring-Pledges" class="headerlink" title="Recurring Pledges"></a>Recurring Pledges</h2><p>Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the APlayer GitHub repository and this website.</p>
|
||||
<ul>
|
||||
<li>Become a backer or sponsor via <a href="https://opencollective.com/aplayer">OpenCollective</a></li>
|
||||
<li>E-mail us: i#html.love</li>
|
||||
</ul>
|
||||
<h2 id="Current-Premium-Sponsors"><a href="#Current-Premium-Sponsors" class="headerlink" title="Current Premium Sponsors"></a>Current Premium Sponsors</h2><h3 id="Special-Sponsors"><a href="#Special-Sponsors" class="headerlink" title="Special Sponsors"></a>Special Sponsors</h3><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
<h3 id="OpenCollective-backers"><a href="#OpenCollective-backers" class="headerlink" title="OpenCollective backers"></a>OpenCollective backers</h3><p><img src="https://opencollective.com/APlayer/backers.svg?width=890"></p>
|
||||
<h2 id="APlayer-contributors"><a href="#APlayer-contributors" class="headerlink" title="APlayer contributors"></a>APlayer contributors</h2><p>This project exists thanks to all the people who contribute.</p>
|
||||
<p><a href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" /></a></p>
|
||||
582
aplayer/docs/zh-Hans/README.html
Normal file
582
aplayer/docs/zh-Hans/README.html
Normal file
@@ -0,0 +1,582 @@
|
||||
<hr>
|
||||
<p>nav: zh-Hans<br>search: zh-Hans</p>
|
||||
<hr>
|
||||
<h1 id="APlayer"><a href="#APlayer" class="headerlink" title="APlayer"></a>APlayer</h1><p>🍭 Wow, such a beautiful HTML5 music player</p>
|
||||
<h2 id="特别赞助商"><a href="#特别赞助商" class="headerlink" title="特别赞助商"></a>特别赞助商</h2><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>使用 npm:</p>
|
||||
<pre><code>npm install aplayer --save
|
||||
</code></pre>
|
||||
<p>使用 Yarn:</p>
|
||||
<pre><code>yarn add aplayer
|
||||
</code></pre>
|
||||
<h2 id="入门"><a href="#入门" class="headerlink" title="入门"></a>入门</h2><div class="aplayer-wrap">
|
||||
<div id="aplayer2"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="aplayer"></div>
|
||||
<script src="APlayer.min.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
audio: [{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg'
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<p>使用模块管理器:</p>
|
||||
<pre><code class="js">import 'APlayer/dist/APlayer.min.css';
|
||||
import APlayer from 'APlayer';
|
||||
|
||||
const ap = new APlayer(options);
|
||||
</code></pre>
|
||||
<h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>默认值</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody><tr>
|
||||
<td>container</td>
|
||||
<td>document.querySelector(‘.aplayer’)</td>
|
||||
<td>播放器容器元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fixed</td>
|
||||
<td>false</td>
|
||||
<td>开启吸底模式, <a href="https://aplayer.js.org/#/home?id=fixed-mode">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mini</td>
|
||||
<td>false</td>
|
||||
<td>开启迷你模式, <a href="https://aplayer.js.org/#/home?id=mini-mode">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoplay</td>
|
||||
<td>false</td>
|
||||
<td>音频自动播放</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme</td>
|
||||
<td>‘#b7daff’</td>
|
||||
<td>主题色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>loop</td>
|
||||
<td>‘all’</td>
|
||||
<td>音频循环播放, 可选值: ‘all’, ‘one’, ‘none’</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>order</td>
|
||||
<td>‘list’</td>
|
||||
<td>音频循环顺序, 可选值: ‘list’, ‘random’</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>preload</td>
|
||||
<td>‘auto’</td>
|
||||
<td>预加载，可选值: ‘none’, ‘metadata’, ‘auto’</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>volume</td>
|
||||
<td>0.7</td>
|
||||
<td>默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio</td>
|
||||
<td>-</td>
|
||||
<td>音频信息, 应该是一个对象或对象数组</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.name</td>
|
||||
<td>-</td>
|
||||
<td>音频名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.artist</td>
|
||||
<td>-</td>
|
||||
<td>音频艺术家</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.url</td>
|
||||
<td>-</td>
|
||||
<td>音频链接</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.cover</td>
|
||||
<td>-</td>
|
||||
<td>音频封面</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.lrc</td>
|
||||
<td>-</td>
|
||||
<td><a href="https://aplayer.js.org/#/home?id=lrc">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.theme</td>
|
||||
<td>-</td>
|
||||
<td>切换到此音频时的主题色，比上面的 theme 优先级高</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>audio.type</td>
|
||||
<td>‘auto’</td>
|
||||
<td>可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, <a href="https://aplayer.js.org/#/home?id=mse-support">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customAudioType</td>
|
||||
<td>-</td>
|
||||
<td>自定义类型，<a href="https://aplayer.js.org/#/home?id=mse-support">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mutex</td>
|
||||
<td>true</td>
|
||||
<td>互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lrcType</td>
|
||||
<td>0</td>
|
||||
<td><a href="https://aplayer.js.org/#/home?id=lrc">详情</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>listFolded</td>
|
||||
<td>false</td>
|
||||
<td>列表默认折叠</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>listMaxHeight</td>
|
||||
<td>-</td>
|
||||
<td>列表最大高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>storageName</td>
|
||||
<td>‘aplayer-setting’</td>
|
||||
<td>存储播放器设置的 localStorage key</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<p>例如:</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer3"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
mini: false,
|
||||
autoplay: false,
|
||||
theme: '#FADFA3',
|
||||
loop: 'all',
|
||||
order: 'random',
|
||||
preload: 'auto',
|
||||
volume: 0.7,
|
||||
mutex: true,
|
||||
listFolded: false,
|
||||
listMaxHeight: 90,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg',
|
||||
lrc: 'lrc1.lrc',
|
||||
theme: '#ebd0c2'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg',
|
||||
lrc: 'lrc2.lrc',
|
||||
theme: '#46718b'
|
||||
}
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><ul>
|
||||
<li><p><code>APlayer.version</code>: 静态属性, 返回 APlayer 的版本号</p>
|
||||
</li>
|
||||
<li><p><code>ap.play()</code>: 播放音频</p>
|
||||
</li>
|
||||
<li><p><code>ap.pause()</code>: 暂停音频</p>
|
||||
</li>
|
||||
<li><p><code>ap.seek(time: number)</code>: 跳转到特定时间，时间的单位为秒</p>
|
||||
<pre><code class="js">ap.seek(100);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.toggle()</code>: 切换播放和暂停</p>
|
||||
</li>
|
||||
<li><p><code>ap.on(event: string, handler: function)</code>: 绑定音频和播放器事件，<a href="https://aplayer.js.org/#/home?id=event-binding">详情</a></p>
|
||||
</li>
|
||||
<li><p><code>ap.volume(percentage: number, nostorage: boolean)</code>: 设置音频音量</p>
|
||||
<pre><code class="js">ap.volume(0.1, true);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.theme(color: string, index: number)</code>: 设置播放器主题色, index 默认为当前音频的 index</p>
|
||||
<pre><code class="js">ap.theme('#000', 0);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.setMode(mode: string)</code>: 设置播放器模式，mode 取值应为 ‘mini’ 或 ‘normal’</p>
|
||||
</li>
|
||||
<li><p><code>ap.mode</code>: 返回播放器当前模式，’mini’ 或 ‘normal’</p>
|
||||
</li>
|
||||
<li><p><code>ap.notice(text: string, time: number, opacity: number)</code>: 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8，设置时间为 0 可以取消通知自动隐藏</p>
|
||||
<pre><code class="js">ap.notice('Amazing player', 2000, 0.8);
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p><code>ap.skipBack()</code>: 切换到上一首音频</p>
|
||||
</li>
|
||||
<li><p><code>ap.skipForward()</code>: 切换到下一首音频</p>
|
||||
</li>
|
||||
<li><p><code>ap.destroy()</code>: 销毁播放器</p>
|
||||
</li>
|
||||
<li><p><code>ap.lrc</code></p>
|
||||
<ul>
|
||||
<li><p><code>ap.lrc.show()</code>: 显示歌词</p>
|
||||
</li>
|
||||
<li><p><code>ap.lrc.hide()</code>: 隐藏歌词</p>
|
||||
</li>
|
||||
<li><p><code>ap.lrc.toggle()</code>: 显示/隐藏歌词</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p><code>ap.list</code></p>
|
||||
<ul>
|
||||
<li><p><code>ap.list.show()</code>: 显示播放列表</p>
|
||||
</li>
|
||||
<li><p><code>ap.list.hide()</code>: 隐藏播放列表</p>
|
||||
</li>
|
||||
<li><p><code>ap.list.toggle()</code>: 显示/隐藏播放列表</p>
|
||||
</li>
|
||||
<li><p><code>ap.list.add(audios: array | object)</code>: 添加一个或几个新音频到播放列表</p>
|
||||
</li>
|
||||
</ul>
|
||||
<pre><code class="js">ap.list.add([{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
lrc: 'lrc.lrc',
|
||||
theme: '#ebd0c2'
|
||||
}]);
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li><code>ap.list.remove(index: number)</code>: 移除播放列表中的一个音频</li>
|
||||
</ul>
|
||||
<pre><code class="js">ap.list.remove(1);
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li><code>ap.list.switch()</code>: 切换到播放列表里的其他音频</li>
|
||||
</ul>
|
||||
<pre><code class="js">ap.list.switch(1);
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li><code>ap.list.clear()</code>: 清空播放列表</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p><code>ap.audio</code>: 原生 audio</p>
|
||||
</li>
|
||||
<li><p><code>ap.audio.currentTime</code>: 返回音频当前播放时间</p>
|
||||
</li>
|
||||
<li><p><code>ap.audio.duration</code>: 返回音频总时间</p>
|
||||
</li>
|
||||
<li><p><code>ap.audio.paused</code>: 返回音频是否暂停</p>
|
||||
</li>
|
||||
<li><p>支持大多数<a href="http://www.w3schools.com/tags/ref_av_dom.asp">原生audio接口</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h2><p><code>ap.on(event, handler)</code></p>
|
||||
<pre><code class="js">ap.on('ended', function () {
|
||||
console.log('player ended');
|
||||
});
|
||||
</code></pre>
|
||||
<p>音频事件</p>
|
||||
<ul>
|
||||
<li>abort</li>
|
||||
<li>canplay</li>
|
||||
<li>canplaythrough</li>
|
||||
<li>durationchange</li>
|
||||
<li>emptied</li>
|
||||
<li>ended</li>
|
||||
<li>error</li>
|
||||
<li>loadeddata</li>
|
||||
<li>loadedmetadata</li>
|
||||
<li>loadstart</li>
|
||||
<li>mozaudioavailable</li>
|
||||
<li>pause</li>
|
||||
<li>play</li>
|
||||
<li>playing</li>
|
||||
<li>progress</li>
|
||||
<li>ratechange</li>
|
||||
<li>seeked</li>
|
||||
<li>seeking</li>
|
||||
<li>stalled</li>
|
||||
<li>suspend</li>
|
||||
<li>timeupdate</li>
|
||||
<li>volumechange</li>
|
||||
<li>waiting</li>
|
||||
</ul>
|
||||
<p>播放器事件</p>
|
||||
<ul>
|
||||
<li>listshow</li>
|
||||
<li>listhide</li>
|
||||
<li>listadd</li>
|
||||
<li>listremove</li>
|
||||
<li>listswitch</li>
|
||||
<li>listclear</li>
|
||||
<li>noticeshow</li>
|
||||
<li>noticehide</li>
|
||||
<li>destroy</li>
|
||||
<li>lrcshow</li>
|
||||
<li>lrchide</li>
|
||||
</ul>
|
||||
<h2 id="歌词"><a href="#歌词" class="headerlink" title="歌词"></a>歌词</h2><p>我们有三种方式来给 APlayer 传递歌词，使用 <code>lrcType</code> 参数指明使用哪种方式，然后把歌词放到 <code>audio.lrc</code> 参数或者 HTML 里。</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer4"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<h3 id="LRC-文件方式"><a href="#LRC-文件方式" class="headerlink" title="LRC 文件方式"></a>LRC 文件方式</h3><p>第一种方式，把歌词放到 LRC 文件里，音频播放时会加载对应的 LRC 文件。</p>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrcType: 3,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'demo.mp3',
|
||||
cover: 'demo.jpg',
|
||||
lrc: 'lrc.lrc'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h3 id="JS-字符串方式"><a href="#JS-字符串方式" class="headerlink" title="JS 字符串方式"></a>JS 字符串方式</h3><p>第二种方式，把歌词放到 JS 字符串里面。</p>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrcType: 1,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'demo.mp3',
|
||||
cover: 'demo.jpg',
|
||||
lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h3 id="HTML-方式"><a href="#HTML-方式" class="headerlink" title="HTML 方式"></a>HTML 方式</h3><p>第三种方式，把歌词放到 HTML 里面。</p>
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="player">
|
||||
<pre class="aplayer-lrc-content">
|
||||
[00:00.00]APlayer audio1
|
||||
[00:04.01]is
|
||||
[00:08.02]amazing
|
||||
<!-- ... -->
|
||||
</pre>
|
||||
<pre class="aplayer-lrc-content">
|
||||
[00:00.00]APlayer audio2
|
||||
[00:04.01]is
|
||||
[00:08.02]amazing
|
||||
<!-- ... -->
|
||||
</pre>
|
||||
</div>
|
||||
<script src="APlayer.min.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrcType: 2,
|
||||
audio: [[
|
||||
{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg'
|
||||
}
|
||||
]]
|
||||
});
|
||||
</code></pre>
|
||||
<h3 id="歌词格式"><a href="#歌词格式" class="headerlink" title="歌词格式"></a>歌词格式</h3><p>支持下面格式的歌词：</p>
|
||||
<p><code>[mm:ss]APlayer</code></p>
|
||||
<p><code>[mm:ss.xx]is</code></p>
|
||||
<p><code>[mm:ss.xxx]amazing</code></p>
|
||||
<p><code>[mm:ss.xx][mm:ss.xx]APlayer</code></p>
|
||||
<p><code>[mm:ss.xx]<mm:ss.xx>is</code></p>
|
||||
<p><code>[mm:ss.xx]amazing[mm:ss.xx]APlayer</code></p>
|
||||
<h2 id="播放列表"><a href="#播放列表" class="headerlink" title="播放列表"></a>播放列表</h2><p>当有多个音频时会 APlayer 会展示一个播放列表，<code>listFolded</code> 参数指明列表是否默认折叠，<code>listMaxHeight</code> 参数指明列表最大高度。</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer5"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
listFolded: false,
|
||||
listMaxHeight: 90,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg',
|
||||
lrc: 'lrc1.lrc',
|
||||
theme: '#ebd0c2'
|
||||
},
|
||||
{
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg',
|
||||
lrc: 'lrc2.lrc',
|
||||
theme: '#46718b'
|
||||
}
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="吸底模式"><a href="#吸底模式" class="headerlink" title="吸底模式"></a>吸底模式</h2><p>APlayer 可以通过吸底模式固定在页面底部，这种模式跟普通模式有很大不同。</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer9"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
fixed: true,
|
||||
audio: [{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="迷你模式"><a href="#迷你模式" class="headerlink" title="迷你模式"></a>迷你模式</h2><p>如果你没有足够空间来放置正常模式的播放器，那么你可以考虑使用迷你模式。</p>
|
||||
<p>请注意迷你模式与吸底模式冲突。</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer6"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('player'),
|
||||
mini: true,
|
||||
audio: [{
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
url: 'url.mp3',
|
||||
cover: 'cover.jpg',
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="MSE-支持"><a href="#MSE-支持" class="headerlink" title="MSE 支持"></a>MSE 支持</h2><h3 id="HLS"><a href="#HLS" class="headerlink" title="HLS"></a>HLS</h3><p>需要在 <code>APlayer.min.js</code> 前面加载 <a href="https://github.com/video-dev/hls.js">hls.js</a>。</p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer7"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="aplayer"></div>
|
||||
<script src="hls.min.js"></script>
|
||||
<script src="APlayer.min.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
audio: [{
|
||||
name: 'HLS',
|
||||
artist: 'artist',
|
||||
url: 'url.m3u8',
|
||||
cover: 'cover.jpg',
|
||||
type: 'hls'
|
||||
}]
|
||||
});
|
||||
</code></pre>
|
||||
<pre><code class="js">// 另一种方式，使用 customAudioType
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
audio: [{
|
||||
name: 'HLS',
|
||||
artist: 'artist',
|
||||
url: 'url.m3u8',
|
||||
cover: 'cover.jpg',
|
||||
type: 'customHls'
|
||||
}],
|
||||
customAudioType: {
|
||||
'customHls': function (audioElement, audio, player) {
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls();
|
||||
hls.loadSource(audio.url);
|
||||
hls.attachMedia(audioElement);
|
||||
}
|
||||
else if (audioElement.canPlayType('application/x-mpegURL') || audioElement.canPlayType('application/vnd.apple.mpegURL')) {
|
||||
audioElement.src = audio.url;
|
||||
}
|
||||
else {
|
||||
player.notice('Error: HLS is not supported.');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="根据封面自适应主题色"><a href="#根据封面自适应主题色" class="headerlink" title="根据封面自适应主题色"></a>根据封面自适应主题色</h2><p>需要额外加载 <a href="https://github.com/lokesh/color-thief/blob/master/src/color-thief.js">color-thief.js</a></p>
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer8"><button class="docute-button load">点击加载播放器</div>
|
||||
</div>
|
||||
|
||||
<pre><code class="html"><link rel="stylesheet" href="APlayer.min.css">
|
||||
<div id="aplayer"></div>
|
||||
<script src="APlayer.min.js"></script>
|
||||
<script src="color-thief.js"></script>
|
||||
</code></pre>
|
||||
<pre><code class="js">const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
theme: '#e9e9e9',
|
||||
audio: [{
|
||||
name: 'name1',
|
||||
artist: 'artist1',
|
||||
url: 'url1.mp3',
|
||||
cover: 'cover1.jpg'
|
||||
}, {
|
||||
name: 'name2',
|
||||
artist: 'artist2',
|
||||
url: 'url2.mp3',
|
||||
cover: 'cover2.jpg'
|
||||
}]
|
||||
});
|
||||
|
||||
const colorThief = new ColorThief();
|
||||
const image = new Image();
|
||||
const xhr = new XMLHttpRequest();
|
||||
const setTheme = (index) => {
|
||||
if (!ap.list.audios[index].theme) {
|
||||
xhr.onload = function(){
|
||||
let coverUrl = URL.createObjectURL(this.response);
|
||||
image.onload = function(){
|
||||
let color = colorThief.getColor(image);
|
||||
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
|
||||
URL.revokeObjectURL(coverUrl)
|
||||
};
|
||||
image.src = coverUrl;
|
||||
}
|
||||
xhr.open('GET', ap.list.audios[index].cover, true);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.send();
|
||||
}
|
||||
};
|
||||
setTheme(ap.list.index);
|
||||
ap.on('listswitch', (index) => {
|
||||
setTheme(index);
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><ul>
|
||||
<li><a href="https://www.jsdelivr.com/package/npm/aplayer">jsDelivr</a></li>
|
||||
<li><a href="https://cdnjs.com/libraries/aplayer">cdnjs</a></li>
|
||||
<li><a href="https://unpkg.com/aplayer/">unpkg</a></li>
|
||||
</ul>
|
||||
<h2 id="常见问题"><a href="#常见问题" class="headerlink" title="常见问题"></a>常见问题</h2><h3 id="为什么播放器不能在手机上自动播放？"><a href="#为什么播放器不能在手机上自动播放？" class="headerlink" title="为什么播放器不能在手机上自动播放？"></a>为什么播放器不能在手机上自动播放？</h3><p>大多数移动端浏览器禁止了音频自动播放。</p>
|
||||
39
aplayer/docs/zh-Hans/ecosystem.html
Normal file
39
aplayer/docs/zh-Hans/ecosystem.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<hr>
|
||||
<p>nav: zh-Hans<br>search: zh-Hans</p>
|
||||
<hr>
|
||||
<h1 id="生态"><a href="#生态" class="headerlink" title="生态"></a>生态</h1><p>让 APlayer 变得更好，请随意在 <a href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a> 提交你的项目和产品</p>
|
||||
<h2 id="帮助"><a href="#帮助" class="headerlink" title="帮助"></a>帮助</h2><h3 id="参与讨论"><a href="#参与讨论" class="headerlink" title="参与讨论"></a>参与讨论</h3><ul>
|
||||
<li><a href="https://t.me/adplayer">Telegram 群</a></li>
|
||||
<li><a href="https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17">QQ 群</a>: 415835947</li>
|
||||
</ul>
|
||||
<h3 id="提交-issue"><a href="#提交-issue" class="headerlink" title="提交 issue"></a>提交 issue</h3><ul>
|
||||
<li><a href="https://github.com/MoePlayer/APlayer/issues">MoePlayer/APlayer/issues</a></li>
|
||||
</ul>
|
||||
<h2 id="相关项目"><a href="#相关项目" class="headerlink" title="相关项目"></a>相关项目</h2><h3 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h3><ul>
|
||||
<li><a href="https://github.com/zgq354/APlayer-Typecho-Plugin">APlayer-Typecho-Plugin</a>: Typecho</li>
|
||||
<li><a href="https://github.com/grzhan/hexo-tag-aplayer">hexo-tag-aplayer</a>: Hexo</li>
|
||||
<li><a href="https://github.com/liwanglin12/Hermit-X">Hermit-X(APlayer for WordPress)</a>: WordPress</li>
|
||||
<li><a href="https://github.com/kn007/APlayerHandle">APlayerHandle</a>: WordPress</li>
|
||||
<li><a href="https://github.com/fghrsh/APlayer_for_Z-BlogPHP">APlayer_for_Z-BlogPHP</a>: Z-BlogPHP</li>
|
||||
<li><a href="https://github.com/sabrinaluo/react-aplayer">react-aplayer</a>: React</li>
|
||||
<li><a href="https://github.com/SevenOutman/vue-aplayer">Vue-APlayer</a>: Vue</li>
|
||||
<li><a href="https://github.com/MoeFE/vue-aplayer">vue-aplayer</a>: Vue</li>
|
||||
<li><a href="https://github.com/Daryl-L/php-aplayer">php-aplayer</a>: PHP</li>
|
||||
</ul>
|
||||
<h3 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h3><ul>
|
||||
<li><a href="https://github.com/Mashiro-Sorata/APlayer-Controler">APlayer-Controler</a>: controling tool</li>
|
||||
<li><a href="https://github.com/metowolf/MetingJS">MetingJS</a>: work with Meting music API</li>
|
||||
</ul>
|
||||
<h2 id="谁在用-APlayer"><a href="#谁在用-APlayer" class="headerlink" title="谁在用 APlayer?"></a>谁在用 APlayer?</h2><ul>
|
||||
<li><a href="https://www.bilibili.com/">bilibili</a>: 国内知名的视频弹幕网站</li>
|
||||
<li><a href="https://hacpai.com/">黑客派</a>: 程序员和设计师的聚集地，一个活跃的小众社区</li>
|
||||
<li><a href="https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B">浙江大学CC98论坛</a>: 浙江大学校网内规模最大的论坛，中国各大学中较活跃的BBS之一</li>
|
||||
<li><a href="http://jellyrue.com/">Jelly Rue</a>: Jelly Rue, an indie pop-rock band from Tartu.</li>
|
||||
<li><a href="http://www.opusopus.co/">Opus</a>: An artist-exploration data visualization application</li>
|
||||
<li><a href="http://www.chinaz.com/15year/index.html">站长之家</a>: 针对中文站点提供资讯、技术、资源、服务</li>
|
||||
<li><a href="https://www.lovelivesupport.com/">LLSupport</a>: This site provides a lot of information about LoveLive</li>
|
||||
<li><a href="https://www.lrcgc.com/diy">歌词千寻</a>: 每日更新的LRC歌词网站</li>
|
||||
<li><a href="http://i.oppsu.cn/">iSearch</a>: 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台</li>
|
||||
<li><a href="https://github.com/MoeFE/Lyric">LRC歌词编辑器</a>: 一款非常实用的在线LRC歌词编辑器</li>
|
||||
<li><a href="https://aerostatica.ru/">Аэростатика</a></li>
|
||||
</ul>
|
||||
29
aplayer/docs/zh-Hans/support.html
Normal file
29
aplayer/docs/zh-Hans/support.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<hr>
|
||||
<p>nav: zh-Hans<br>search: zh-Hans</p>
|
||||
<hr>
|
||||
<h1 id="赞助-APlayer-的研发"><a href="#赞助-APlayer-的研发" class="headerlink" title="赞助 APlayer 的研发"></a>赞助 APlayer 的研发</h1><p>APlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着项目规模的增长，也需要有相应的资金支持才能持续项目的维护的开发。</p>
|
||||
<p>如果你是企业经营者并且将 APlayer 用在商业产品中，那么赞助 APlayer 有商业上的益处：可以让你的产品所依赖的框架保持健康并得到积极的维护。</p>
|
||||
<p>如果你是个人开发者并且享受 APlayer 带来的高开发效率，可以用捐助来表示你的谢意 —— 比如偶尔给我买杯咖啡 :)</p>
|
||||
<p>你可以通过下列的方法来赞助 APlayer 的开发。</p>
|
||||
<h2 id="一次性赞助"><a href="#一次性赞助" class="headerlink" title="一次性赞助"></a>一次性赞助</h2><p>我们通过以下方式接受赞助：</p>
|
||||
<ul>
|
||||
<li><a href="https://i.imgur.com/aq6PtWa.png">微信支付</a></li>
|
||||
<li><a href="https://i.imgur.com/wv1Pj2k.png">支付宝</a></li>
|
||||
<li><a href="https://www.paypal.me/DIYgod">Paypal</a></li>
|
||||
<li>比特币: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1</li>
|
||||
</ul>
|
||||
<h2 id="周期性赞助"><a href="#周期性赞助" class="headerlink" title="周期性赞助"></a>周期性赞助</h2><p>周期性赞助可以获得额外的回报，比如你的名字或你的公司 logo 会出现在 APlayer 的 GitHub 仓库和现在我们的官网中。</p>
|
||||
<ul>
|
||||
<li>通过 <a href="https://opencollective.com/aplayer">OpenCollective</a> 赞助成为 backer 或 sponsor </li>
|
||||
<li>给我们发邮件联系赞助事宜: i#html.love</li>
|
||||
</ul>
|
||||
<h2 id="当前的顶级赞助商"><a href="#当前的顶级赞助商" class="headerlink" title="当前的顶级赞助商"></a>当前的顶级赞助商</h2><h3 id="特别赞助商"><a href="#特别赞助商" class="headerlink" title="特别赞助商"></a>特别赞助商</h3><a href="https://www.dogecloud.com/?ref=dplayer" target="_blank">
|
||||
<img width="222px" src="https://i.imgur.com/BBKXPAp.png">
|
||||
</a>
|
||||
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
|
||||
<img width="222px" src="https://imgur.com/apG1uKf.png">
|
||||
</a>
|
||||
|
||||
<h3 id="OpenCollective-backers"><a href="#OpenCollective-backers" class="headerlink" title="OpenCollective backers"></a>OpenCollective backers</h3><p><img src="https://opencollective.com/APlayer/backers.svg?width=890"></p>
|
||||
<h2 id="APlayer-贡献者"><a href="#APlayer-贡献者" class="headerlink" title="APlayer 贡献者"></a>APlayer 贡献者</h2><p>感谢所有贡献者。</p>
|
||||
<p><a href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" /></a></p>
|
||||
Reference in New Issue
Block a user