Aplayer
# 介绍
可以插入 aplayer 标签
# 使用和示例
# 参数
src 传参，具体参数见 APlayer 文档 (opens new window)，示例见下方 DEMO。
# 基本使用
<ClientOnly>
<APlayer :src="aplayer" />
</ClientOnly>
<script>
export default {
data() {
return {
aplayer: {
audio: [
{
name: "年轻人要热爱祖国",
artist: "音阙诗听/赵方婧",
url: "/assets/audio/年轻人要热爱祖国.mp3",
cover:
"https://sm.sm9.top/api/music?server=Tencent&type=pic&id=001gv6xI4BNGiP",
lrc: "/assets/audio/年轻人要热爱祖国.lrc",
},
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# HLS 音频
以下几种情况会自动引入 hls.js
url以.m3u8结尾且type类型为undefinedtype值为hls或m3u8
<ClientOnly>
<APlayer :src="aplayerHls" />
</ClientOnly>
<script>
export default {
data() {
return {
aplayerHls: {
audio: [
{
name: "年轻人要热爱祖国HLS",
artist: "音阙诗听/赵方婧",
url: "/assets/audio/hls/年轻人要热爱祖国.m3u8",
type: "hls",
cover:
"https://sm.sm9.top/api/music?server=Tencent&type=pic&id=001gv6xI4BNGiP",
lrc: "/assets/audio/年轻人要热爱祖国.lrc",
},
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# customType
自定义类型，方法见示例
<ClientOnly>
<APlayer :src="aplayerCustomType" />
</ClientOnly>
<script>
export default {
data() {
return {
aplayerCustomType: {
audio: [
{
name: "年轻人要热爱祖国",
artist: "音阙诗听/赵方婧",
url: "/assets/audio/hls/年轻人要热爱祖国.m3u8",
type: "customHls",
cover:
"https://sm.sm9.top/api/music?server=Tencent&type=pic&id=001gv6xI4BNGiP",
lrc: "/assets/audio/年轻人要热爱祖国.lrc",
},
],
customAudioType: {
customHls: function (audioElement, audio, player) {
import(
/* webpackChunkName: "hls" */ "hls.js/dist/hls.min.js"
).then(({ default: Hls }) => {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(audio.url);
hls.attachMedia(audioElement);
player.on("destroy", function () {
hls.destroy();
});
} 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.");
}
});
},
},
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 混合列表
<ClientOnly>
<APlayer :src="aplayer2" />
</ClientOnly>
<script>
export default {
data() {
return {
aplayer2: {
audio: [
{
name: "年轻人要热爱祖国",
artist: "音阙诗听/赵方婧",
url: "/assets/audio/年轻人要热爱祖国.mp3",
cover:
"https://sm.sm9.top/api/music?server=Tencent&type=pic&id=001gv6xI4BNGiP",
lrc: "/assets/audio/年轻人要热爱祖国.lrc",
},
{
name: "年轻人要热爱祖国HLS",
artist: "音阙诗听/赵方婧",
url: "/assets/audio/hls/年轻人要热爱祖国.m3u8",
type: "hls",
cover:
"https://sm.sm9.top/api/music?server=Tencent&type=pic&id=001gv6xI4BNGiP",
lrc: "/assets/audio/年轻人要热爱祖国.lrc",
},
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 配置
主题下插件配置为默认配置，每个 <APlayer /> 标签下的设置会覆盖默认配置。
module.exports = {
plugins: [
[
"smplayer",
{
aplayer: {
hls: false,
src: {
lrcType: 3,
},
},
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
或
module.exports = {
plugins: {
smplayer: {
aplayer: {
hls: false,
src: {
lrcType: 3,
},
},
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
上次更新: 10/4/2022, 11:21:17 PM