IDK what to write

开源地址: https://github.com/aynakeya/AynaLivePlayer

要求

开源项目.jpg
给OBS用的，用来显示信息
访问的时候先获取全部的数据渲染，然后用websocket获取更新的数据
能够单个输出所有的数据 @1
能自定义输出的模板(?暂定) @2
最好用vue

@1 单个输出所有的数据

类似https://github.com/aynakeya/BiliAudioBot里的frontend(用vue写的)，可以单个输出所有的数据。release有打包好发布的测试用例。

适合简单的输出
得有一个css的class，这样子用户可以自己在obs自定义css，虽然大部分用户不知道怎么搞

比如GET /info/CurrentTitle 或者 info?target=Current.Title 返回

<p class=".current-title">外婆桥</p>

比如 GET info?target=Current.Cover 返回

<img class=".current-title" src="..." />

比如 GET info?target=Playlist 返回

<ol>
   <li v-for="item in playlist">
      <h2 class="playlist-info">#{{ playlist.indexOf(item) }} - {{ item.title }} - {{ item.artist }} - {{ item.username }}</h2>
   </li>
</ol>

@2 自定义输出的模板

第一目标 不整了/没想好怎么整
第儿目标 最简单的还是和TextInfo一样，用户给一个模板(通过get?会不会太长了，或者本地读取?这样的话我后端获取还得加一个api来返回模板) 然后渲染出对应的html的代码，当然也要有css这样子用户可以自定义

Title: {{ .Current.Title }}
Artist: {{ .Current.Artist }}
Album: {{ .Current.Album}}
Username: {{ .Current.Username }}
Progress(in seconds):  {{.CurrentTime}} / {{.TotalTime}}
Progress(in minutes:seconds):  {{ GetMinutes .CurrentTime}}:{{ GetSeconds .CurrentTime}} / {{ GetMinutes .TotalTime}}:{{ GetSeconds .TotalTime}}
Lyric: {{.Lyric}}

{{range .Playlist}}
Index: # {{ .Index}}
Title: {{ .Title }}
Artist: {{ .Artist }}
Album: {{ .Album}}
Username: {{ .Username }}
{{end}}

终极目标不知道能不能想做的像https://github.com/xfgryujk/blivechat / https://link.bilibili.com/ctool/vtuber/index.html, 但是感觉挺麻烦的

后端接口

前端的页面在/地址下

两个接口


mux.Handle("/", http.FileServer(http.Dir(config.GetAssetPath("webinfo")))) # ./assets/webinfo
mux.HandleFunc("/ws/info", server.handleInfo)
mux.HandleFunc("/api/info", server.getInfo)

api详情

GET /api/info

http://127.0.0.1:4000/api/info

返回一个OutInfo, 当前的所有数据

{
    "Current": {
        "Index": 0,
        "Title": "外婆桥",
        "Artist": "任然",
        "Album": "外婆桥",
        "Username": "System",
        "Cover": {
            "Url": "https://p1.music.126.net/Ep-CjAsRL5yvZkDreiWsMQ==/109951164390004861.jpg",
            "Data": null
        }
    },
    "CurrentTime": 6,
    "TotalTime": 261,
    "Lyric": " 编曲 : 闫津",
    "Playlist": [
        {
            "Index": 0,
            "Title": "Melody",
            "Artist": "ZIV,KIPES",
            "Album": "倒叙爱情",
            "Username": "System",
            "Cover": {
                "Url": "",
                "Data": null
            }
        },
        {
            "Index": 1,
            "Title": "Cure For Me",
            "Artist": "AURORA",
            "Album": "Cure For Me",
            "Username": "System",
            "Cover": {
                "Url": "",
                "Data": null
            }
        },
        {
            "Index": 2,
            "Title": "填满",
            "Artist": "苏星婕",
            "Album": "填满",
            "Username": "System",
            "Cover": {
                "Url": "",
                "Data": null
            }
        }
    ]
}

websocket /ws/info

ws://127.0.0.1:4000/ws/info

返回一个WebsocketData, 更新的数据

{
    "Update": "Lyric",
    "Data": {
        "Current": {
            "Index": 0,
            "Title": "",
            "Artist": "",
            "Album": "",
            "Username": "",
            "Cover": {
                "Url": "",
                "Data": null
            }
        },
        "CurrentTime": 0,
        "TotalTime": 0,
        "Lyric": " 混音 : KIPES",
        "Playlist": null
    }
}

Structures

# Url == "" && Data == nil 或者Url != "" || Data != nil 
type Picture struct {
	Url  string # 如果是url就会给url
	Data []byte # 如果是二进制数据就是base64
}

type MediaInfo struct {
	Index    int
	Title    string
	Artist   string
	Album    string
	Username string
	Cover    player.Picture
}

type OutInfo struct {
	Current     MediaInfo
	CurrentTime int
	TotalTime   int
	Lyric       string
	Playlist    []MediaInfo
}

type WebsocketData struct {
	Update string
	Data   OutInfo
}

4.9 KiB Raw Blame History Unescape Escape