示例：

server="netease"

2、示例

2.1、

server="netease" 指定音乐平台为网易云，type="song" 指单曲类型，id="7373135320" 为音乐的 id（这里的 id 为打开音乐歌单，网址显示的 id）

开启吸底模式 fixed="true", 开启迷你模式 mini="true", 随机播放 order="random", 关闭底部歌词 lrc-type="0"

注意：id 需要为自己创建的歌单，不能为我喜欢的音乐；server 可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
 
<meting-js 
    server="netease" 
    type="playlist" 
    id="7360465359"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

2.2、

<!--css-->
 
　　<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
 
<!--js-->
 
　　<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
 
　　<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<!--参数设置-->
<meting-js
 
　　server="netease"
 
　　type="playlist"
 
　　id="5195463265"
 
　　fixed="true"
 
　　autoplay="true"
 
　　loop="all"
 
　　order="random"
 
　　preload="auto"
 
　　list-folded="ture"
 
　　list-max-height="500px"
 
　　lrc-type="1">
 
</meting-js>

Aplayer 搭配MetingJS音乐插件简单使用最先出现在时空之歌。

安装

使用 npm:

npm install aplayer --save

使用 Yarn:

yarn add aplayer

入门

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>

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

使用模块管理器:

import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';

const ap = new APlayer(options);

参数

例如:

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'
        }
    ]
});

API

• APlayer.version: 静态属性, 返回 APlayer 的版本号
• ap.play(): 播放音频
• ap.pause(): 暂停音频
• ap.seek(time: number): 跳转到特定时间，时间的单位为秒ap.seek(100);
• ap.toggle(): 切换播放和暂停
• ap.on(event: string, handler: function): 绑定音频和播放器事件，详情
• ap.volume(percentage: number, nostorage: boolean): 设置音频音量ap.volume(0.1, true);
• ap.theme(color: string, index: number): 设置播放器主题色, index 默认为当前音频的 indexap.theme('#000', 0);
• ap.setMode(mode: string): 设置播放器模式，mode 取值应为 ‘mini’ 或 ‘normal’
• ap.mode: 返回播放器当前模式，’mini’ 或 ‘normal’
• ap.notice(text: string, time: number, opacity: number): 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8，设置时间为 0 可以取消通知自动隐藏ap.notice('Amazing player', 2000, 0.8);
• ap.skipBack(): 切换到上一首音频
• ap.skipForward(): 切换到下一首音频
• ap.destroy(): 销毁播放器
• ap.lrc
  • ap.lrc.show(): 显示歌词
  • ap.lrc.hide(): 隐藏歌词
  • ap.lrc.toggle(): 显示/隐藏歌词
• ap.list
  • ap.list.show(): 显示播放列表
  • ap.list.hide(): 隐藏播放列表
  • ap.list.toggle(): 显示/隐藏播放列表
  • ap.list.add(audios: array | object): 添加一个或几个新音频到播放列表
  ap.list.add([{ name: 'name', artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', lrc: 'lrc.lrc', theme: '#ebd0c2' }]);
  • ap.list.remove(index: number): 移除播放列表中的一个音频
  ap.list.remove(1);
  • ap.list.switch(): 切换到播放列表里的其他音频
  ap.list.switch(1);
  • ap.list.clear(): 清空播放列表
• ap.audio: 原生 audio
  • ap.audio.currentTime: 返回音频当前播放时间
  • ap.audio.duration: 返回音频总时间
  • ap.audio.paused: 返回音频是否暂停
  • 支持大多数原生audio接口

事件绑定

ap.on(event, handler)

ap.on('ended', function () {
    console.log('player ended');
});

音频事件

• abort
• canplay
• canplaythrough
• durationchange
• emptied
• ended
• error
• loadeddata
• loadedmetadata
• loadstart
• mozaudioavailable
• pause
• play
• playing
• progress
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting

播放器事件

• listshow
• listhide
• listadd
• listremove
• listswitch
• listclear
• noticeshow
• noticehide
• destroy
• lrcshow
• lrchide

歌词

我们有三种方式来给 APlayer 传递歌词，使用 lrcType 参数指明使用哪种方式，然后把歌词放到 audio.lrc 参数或者 HTML 里。

LRC 文件方式

第一种方式，把歌词放到 LRC 文件里，音频播放时会加载对应的 LRC 文件。

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,
    audio: {
        name: 'name',
        artist: 'artist',
        url: 'demo.mp3',
        cover: 'demo.jpg',
        lrc: 'lrc.lrc'
    }
});

JS 字符串方式

第二种方式，把歌词放到 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'
    }
});

HTML 方式

第三种方式，把歌词放到 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>

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'
        }
    ]]
});

歌词格式

支持下面格式的歌词：

[mm:ss]APlayer

[mm:ss.xx]is

[mm:ss.xxx]amazing

[mm:ss.xx][mm:ss.xx]APlayer

[mm:ss.xx]<mm:ss.xx>is

[mm:ss.xx]amazing[mm:ss.xx]APlayer

播放列表

当有多个音频时会 APlayer 会展示一个播放列表，listFolded 参数指明列表是否默认折叠，listMaxHeight 参数指明列表最大高度。

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'
        }
    ]
});

吸底模式

APlayer 可以通过吸底模式固定在页面底部，这种模式跟普通模式有很大不同。点击

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

迷你模式

如果你没有足够空间来放置正常模式的播放器，那么你可以考虑使用迷你模式。

请注意迷你模式与吸底模式冲突。

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

MSE 支持

HLS

需要在 APlayer.min.js 前面加载 hls.js。

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="hls.min.js"></script>
<script src="APlayer.min.js"></script>

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'HLS',
        artist: 'artist',
        url: 'url.m3u8',
        cover: 'cover.jpg',
        type: 'hls'
    }]
});

// 另一种方式，使用 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.');
            }
        }
    }
});

根据封面自适应主题色

需要额外加载 color-thief.js

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script src="color-thief.js"></script>

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);
});

CDN

• jsDelivr
• cdnjs
• unpkg

常见问题

为什么播放器不能在手机上自动播放？

大多数移动端浏览器禁止了音频自动播放。

参考资料

• 首页 – APlayer

APlayer最先出现在时空之歌。

1.1. 接口文档

https://api.vvhan.com/dongman.html

1.2. 请求地址

https://api.vvhan.com/api/acgimg

1.3. 请求方式

get

1.4. 请求参数

1.5. 示例代码

import json, requests
url = 'https://api.vvhan.com/api/acgimg'
params = {'type': 'json'}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))

1.6. 响应数据

{
  "success": true,
  "imgurl": "https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[337].jpg",
  "info": {
    "width": 1920,
    "height": 1080,
    "type": "img"
  }
}

1.7. 图片预览

1.8. 温馨提示

调用多次发现，该接口返回的图片尺寸大多是1920x1800，且图片url地址中只有最后[ ]里面的数值在变化，截止目前该变化范围是0-696，也就是该接口是从697张二次元图片中随机返回一张。如果你想下载该接口所有的697张图片，可以使用下方代码：

'''依赖模块
pip install requests
'''
import concurrent.futures as cf
import os, time, requests

# 单张图片下载函数
def down(fname, url):
    res = requests.get(url)
    with open(fname, 'wb') as f:
        f.write(res.content)

# 进度条打印函数
def show(num, _sum,  runTime):
    barLen = 20
    perFin = num/_sum
    numFin = round(barLen*perFin)
    numNon = barLen-numFin
    leftTime = (1-perFin)*(runTime/perFin)
    print(
        f"{num:0>{len(str(_sum))}}/{_sum}",
        f"|{'█'*numFin}{' '*numNon}|",
        f"PROCESS: {perFin*100:.0f}%",
        f"RUN: {runTime:.0f}S",
        f"ETA: {leftTime:.0f}S",
        end='
'
    )
    if num == _sum:
        print()

# 主函数（多线程）
def main():                  
    floder = './img/'
    os.makedirs(floder, exist_ok=True)
    fmt = 'https://cdn.jsdelivr.net/gh/uxiaohan/GitImgTypecho/Acg/api.vvhan.com[{}].jpg'
    total = 697
    with cf.ThreadPoolExecutor() as tp:
        t1 = time.time()
        futures = []
        for i in range(total):
            url = fmt.format(i)
            fname = floder+os.path.basename(url)
            future = tp.submit(down, fname, url)
            futures.append(future)
        count = 0
        for future in cf.as_completed(futures):
            count += 1
            t2 = time.time()
            show(count, total, t2-t1)
    os.system('pause')


main()

2. 樱花API

2.1. 接口文档

https://www.dmoe.cc/

2.2. 请求地址

https://www.dmoe.cc/random.php

2.3. 请求方式

get

2.4. 请求参数

2.5. 示例代码

import json, requests
url = 'http://www.dmoe.cc/random.php'
params = {'return': 'json'}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))

2.6. 响应数据

{
  "code": "200",
  "imgurl": "https://tva1.sinaimg.cn/large/0072Vf1pgy1foxkil4o6qj31hc0u0nbz.jpg",
  "width": "1920",
  "height": "1080"
}

2.7. 图片预览

3. 岁月小筑API

3.1. 接口文档

http://img.xjh.me/

3.2. 请求地址

• https

https://img.xjh.me/random_img.php

• http

http://img.xjh.me/random_img.php

3.3. 请求方式

get

3.4. 请求参数

3.5. 示例代码

import json, requests
url = 'https://img.xjh.me/random_img.php'
params = {
    'return': 'json',
    'type': 'bg',
    'cytpe': 'acg'
}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))

3.6. 响应数据

{
  "error": 0,
  "result": 200,
  "img": "//img.xjh.me/desktop/bg/acg/53829526_p0.jpg"
}

3.7. 图片预览

4. Lucky小站API(失效)

4.1. 接口文档

https://www.nck.cc/index.php/archives/3/

4.2. 请求地址

https://www.rrll.cc/tuceng/ecy.php

4.3. 请求方式

get

4.4. 请求参数

4.5. 示例代码

url = 'https://www.rrll.cc/tuceng/ecy.php'
params = {
    'return': 'json'
}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))

4.6. 响应数据

{
  "code": "200",
  "acgurl": "https://tva4.sinaimg.cn/large/0072Vf1pgy1foxkgc5msdj31hc0u01cv.jpg",
  "width": "1920",
  "height": "1080",
  "size": "jpg"
}

5. 三秋API

5.1. 接口文档

https://api.ghser.com/acg.html

5.2. 请求地址

https://api.ghser.com/random/api.php

5.3. 请求方式

get/post

5.4. 请求参数

空

5.5. 示例代码

import json, requests
url = 'https://api.ghser.com/random/api.php'
res = requests.get(url)
print(res.url)

5.6. 响应数据

返回302重定向后的图片url

https://tva1.sinaimg.cn/large/006gkh44ly1fz1kddbampj31hc0u0tyb.jpg

5.7. 图片预览

7. 呓喵酱API

7.1. 接口文档

https://www.eee.dog/tech/rand-pic-api.html

7.2. 请求地址

https://api.yimian.xyz/img

7.3. 请求方式

get/post

7.4. 请求参数

7.5. 示例代码

import json, requests
url = 'https://api.yimian.xyz/img'
params = {
    'type': 'moe',
    'size': '1920x1080'
}
res = requests.get(url, params=params)
print(res.url)

7.6. 响应数据

返回302重定向后的图片url

https://yimian-image.obs.cn-east-2.myhuaweicloud.com/moe/img_865_2048x1152_96.5199966430664_null_normal.jpg?AWSAccessKeyId=6LJRZC0YN3MQXXFOWMIH&Expires=1608815304&Signature=C5BWWC/r1/o230t1VVLHHmH0kF4%3D

7.7. 图片预览

8. 调用代码汇总

# %%1. 韩小韩API
import json, requests
url = 'https://api.vvhan.com/api/acgimg'
params = {'type': 'json'}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))


# %%2. 樱花API
import json, requests
url = 'http://www.dmoe.cc/random.php'
params = {'return': 'json'}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))


# %%3. 岁月小筑API
import json, requests
url = 'https://img.xjh.me/random_img.php'
params = {
    'return': 'json',
    'type': 'bg',
    'cytpe': 'acg'
}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))


# %%4. Lucky小站API
import json, requests
url = 'https://www.rrll.cc/tuceng/ecy.php'
params = {
    'return': 'json'
}
res = requests.get(url, params=params).json()
print(json.dumps(res, indent=2))


# %%5. 一叶三秋API
import json, requests
url = 'https://api.ghser.com/random/api.php'
res = requests.get(url)
print(res.url)


# %%6. 汐岑API
import json, requests
url = 'https://acg.yanwz.cn/wallpaper/api.php'
res = requests.get(url)
with open('test.jpg', 'wb') as f:
    f.write(res.content)

# %%7. 呓喵酱API
import json, requests
url = 'https://api.yimian.xyz/img'
params = {
    'type': 'moe',
    'size': '1920x1080'
}
res = requests.get(url, params=params)
print(res.url)

9. 网页调用示例

以樱花API为例

• 插入图片

<img src="http://www.dmoe.cc/random.php"/>

• 背景图片

<body style="background: url(http://www.dmoe.cc/random.php);"></body>

其它API只需要替换src或url属性值为以下值

1. 韩小韩API
https://api.vvhan.com/api/acgimg
2. 樱花API(失效)
http://www.dmoe.cc/random.php
3. 岁月小筑API
https://img.xjh.me/random_img.php?return=302
4. Lucky小站API(失效)
https://www.rrll.cc/tuceng/ecy.php
5. 一叶三秋API(失效)
https://api.ghser.com/random/api.php
6. 汐岑API(失效)
https://acg.yanwz.cn/wallpaper/api.php
7. 呓喵酱API
https://api.yimian.xyz/img

原文地址：https://www.cnblogs.com/ghgxj/p/14219047.html

【python】7个随机二次元图片api接口汇总（附网页调用示例）(转载)最先出现在时空之歌。