帮助:Gramophone
本页演示如何用 Gramophone 在维基页面中插入音频播放器、行内播放按钮和播放列表。点击下方按钮即可试听。基础示例使用本站已有的三个语音文件,显示名称仅用于说明用途。封面示例使用《炮声的誓言》PV音频。
编辑页面时,复制各节的维基文本,并将文件名换成已上传的音频文件名。文件名可带 File: 或 文件: 前缀。需要上传新文件时,请先确认你有权使用该音频。
单个音频
<gramophone>1001_atk.mp3</gramophone>
文件列表形式默认显示文件名。要为完整播放器设置自定义标题,请使用下方的 JSON 播放列表。
正文中的播放按钮
攻击语音 可以直接插在一句话中。
攻击语音 <playbutton title="攻击语音">1001_atk.mp3</playbutton> 可以直接插在一句话中。
title 用于按钮提示、屏幕阅读器及系统媒体控件。它不会自动生成按钮旁边的正文,因此请像示例一样另外写出可见的名称。
表格中的语音
单个文件放在表格单元格中时,完整播放器会使用紧凑的单行布局。只需一个按钮时,使用 <playbutton>。
| 用途 | 行内按钮 | 单行播放器 |
|---|---|---|
| 攻击语音 | ||
| 受损语音 |
{| class="wikitable"
! 用途 !! 行内按钮 !! 单行播放器
|-
| 攻击语音 || <playbutton title="攻击语音">1001_atk.mp3</playbutton> || <gramophone>1001_atk.mp3</gramophone>
|-
| 受损语音 || <playbutton title="受损语音">1001_break.mp3</playbutton> || <gramophone>1001_break.mp3</gramophone>
|}
带标题的播放列表
JSON 形式可设置每段音频的标题、艺术家、专辑、封面和歌词。本例只引用已有音频,并在页面打开时展开列表。
<gramophone>
{
"isPlaylistOpen": true,
"playlist": [
{ "audioFileUrl": "1001_atk.mp3", "title": "攻击语音" },
{ "audioFileUrl": "1001_break.mp3", "title": "受损语音" },
{ "audioFileUrl": "1001_formation.mp3", "title": "编队语音" }
]
}
</gramophone>
JSON 中的字段名和字符串使用双引号,布尔值写为 true 或 false,最后一项后面不要加逗号。播放器选项放在 playlist 同级,音频信息放在各个曲目对象中。
用逗号列出多个文件
不需要自定义曲目名称时,用逗号分隔文件名即可。
<gramophone>1001_atk.mp3,1001_break.mp3,1001_formation.mp3|openplaylist=yes</gramophone>
文件名本身含有逗号时,请用双引号包住整个文件名。<playbutton> 也接受逗号列表,一个按钮会依次播放其中的文件。
常用选项
| 用途 | 文件列表写法 | JSON 写法 |
|---|---|---|
| 默认展开播放列表 | openplaylist="yes" |
"isPlaylistOpen": true
|
| 循环整个播放列表 | loop="yes" |
"loop": true
|
| 尝试自动播放 | autostart="yes" |
"autoPlay": true
|
文件列表的选项可写在标签属性中,也可写在文件名后的 |选项=yes 中。两处同时指定时,标签内容中的选项优先,只有 yes 会开启选项。
JSON 模式请把这些选项写在 JSON 内部。 JSON 模式仅接受 class 和 style 标签属性,其余属性会被忽略。浏览器可能阻止自动播放,本页示例均等待读者点击后播放。
对于 <playbutton>,可用 hidemissing="yes" 隐藏所有候选文件均不存在的按钮,适合部分语音未上传的模板。该选项不适用于完整播放器。
在模板中使用
模板参数需要展开时,使用 #tag。下面先演示固定文件名的可运行写法。
编队语音
编队语音 {{#tag:playbutton|1001_formation.mp3|title=编队语音}}
以下为模板源码示意,可放入你自己的语音按钮模板,再以第一个参数传入文件名,以第二个参数传入标题。
{{#tag:playbutton|{{{1}}}|title={{{2|{{{1}}}}}}|hidemissing=yes}}
封面与曲目信息
下面使用《炮声的誓言》的官方PV音频(约1分43秒),展示封面、标题、演唱者与专辑栏。这里的“战舰少女R(官方PV)”用于说明音频来源,不是唱片专辑名称。
<gramophone>
{
"playlist": [
{
"audioFileUrl": "炮声的誓言-BV1hW411P7QE-PV.mp3",
"title": "炮声的誓言(官方PV版)",
"artist": "祈Inory",
"album": "战舰少女R(官方PV)",
"coverImageUrl": "炮声的誓言-BV1hW411P7QE-封面.jpg",
"navigationUrl": "https://www.bilibili.com/video/BV1hW411P7QE/"
}
]
}
</gramophone>
- 标题:炮声的誓言(官方PV版)
- 演唱:祈Inory
- 作曲:山田高弘
- 中文作词:墨流离Sumi
- 混音:LTC
- 监制:绯川陵彦
- 出品:幻萌网络
- 音频与封面来源:战舰少女R艾拉发布的官方PV
coverImageUrl 指向上传的封面文件,title、artist、album 指定播放器显示的信息,navigationUrl 将文件页面按钮链接到原视频。本例不含LRC,暂不显示同步歌词。
同步歌词
本页尚未添加配套的 LRC 文件,因此不展示实时歌词。下面只是字段写法示意,其中的占位文件名不能直接播放,使用前请换成实际文件。
{
"playlist": [
{
"audioFileUrl": "请替换为音频文件.mp3",
"title": "显示标题",
"coverImageUrl": "请替换为封面文件.jpg",
"lrcFileUrl": "请替换为歌词文件.lrc",
"lrcFileOffset": 0
}
]
}
LRC 每行以时间标记(如 [00:01.00])开头。lrcFileOffset 以毫秒为单位调整时间。上传 LRC 需要管理员允许该文件扩展名,也可引用可访问的 LRC 地址。请只使用有权发布的歌词或原创说明文字。
旧标签兼容与更多说明
Gramophone 默认兼容 <flashmp3>、<sm2> 和 <modernsoundmanager>。它们分别对应文件列表播放器、行内按钮和 JSON 播放器。新页面建议使用本页的 <gramophone> 与 <playbutton> 写法。<ab> 需要管理员单独开启兼容选项。