189 lines
8.1 KiB
HTML
189 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>小爱音箱操控面板</title>
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
<script src="./jquery-3.7.1.min.js?version=1733199308"></script>
|
||
<link rel="stylesheet" href="./main.css">
|
||
<link rel="icon" href="./favicon.ico">
|
||
</head>
|
||
|
||
<body class="index_page">
|
||
<div class="player">
|
||
<h1>音乐播放器
|
||
<a id="version" href="https://github.com/hanxi/xiaomusic/blob/main/CHANGELOG.md" target="_blank">版本
|
||
1.0.0</a><span id="versionnew" class="new-badge"></span>
|
||
</h1>
|
||
|
||
<label for="did">选择播放设备:</label>
|
||
<select id="did" class="device-selector">
|
||
<option value="default">默认设备</option>
|
||
</select>
|
||
|
||
<label for="music_list" style="display: flex;align-items: center;">选择播放列表:
|
||
<div class="option-inline" onclick="sendcmd('刷新列表')">
|
||
<span class="material-icons">refresh</span>
|
||
<span class="tooltip">刷新列表</span>
|
||
</div>
|
||
</label>
|
||
<select id="music_list" class="playlist-selector">
|
||
</select>
|
||
|
||
<label for="music_name" style="display: flex;align-items: center;">选择歌曲:
|
||
<div class="option-inline" onclick="toggleDelete()">
|
||
<span class="material-icons">delete</span>
|
||
<span class="tooltip">删除歌曲</span>
|
||
</div>
|
||
</label>
|
||
<select id="music_name" class="song-selector">
|
||
</select>
|
||
|
||
<progress class="progress" id="progress" value="0" max="100"></progress>
|
||
<div style="display: flex; justify-content: space-between; width: 100%;">
|
||
<span class="current-time" id="current-time">0:00</span>
|
||
<div class="current-song" id="playering-music">当前播放歌曲：无</div>
|
||
<span class="duration" id="duration">0:00</span>
|
||
</div>
|
||
<audio id="audio" controls src="" autoplay>
|
||
</audio>
|
||
<div class="buttons">
|
||
<div class="player-controls button-group">
|
||
<button onclick="prevTrack()">
|
||
<span class="material-icons">skip_previous</span>
|
||
<span class="tooltip">上一首</span>
|
||
</button>
|
||
<button onclick="playOnDevice()">
|
||
<span class="material-icons" id="playPauseIcon">play_arrow</span>
|
||
<span class="tooltip">播放</span>
|
||
</button>
|
||
<button onclick="nextTrack()">
|
||
<span class="material-icons">skip_next</span>
|
||
<span class="tooltip">下一首</span>
|
||
</button>
|
||
<button onclick="stopPlay()">
|
||
<span class="material-icons" id="playPauseIcon">stop</span>
|
||
<span class="tooltip">关机</span>
|
||
</button>
|
||
|
||
</div>
|
||
<div class="mode-controls button-group">
|
||
<button id="modeBtn" onclick="togglePlayMode()">
|
||
<span class="material-icons">shuffle</span>
|
||
<span class="tooltip">切换播放模式</span>
|
||
</button>
|
||
<button onclick="addToFavorites()" class="favorite">
|
||
<span class="material-icons">favorite</span>
|
||
<span class="tooltip">收藏歌曲</span>
|
||
</button>
|
||
<button onclick="toggleVolume()">
|
||
<span class="material-icons">volume_up</span>
|
||
<span class="tooltip">调节音量</span>
|
||
</button>
|
||
<button onclick="toggleLocalPlay()" id="web_play">
|
||
<span class="material-icons">headphones</span>
|
||
<span class="tooltip">网页播放</span>
|
||
</button>
|
||
</div>
|
||
<div class="mode-controls button-group">
|
||
<button onclick="toggleSearch()">
|
||
<span class="material-icons">search</span>
|
||
<span class="tooltip">搜索歌曲</span>
|
||
</button>
|
||
<button onclick="togglePlayLink()">
|
||
<span class="material-icons">link</span>
|
||
<span class="tooltip">播放链接</span>
|
||
</button>
|
||
<button onclick="toggleTimer()">
|
||
<span class="material-icons">timer</span>
|
||
<span class="tooltip">定时关机</span>
|
||
</button>
|
||
<button onclick="openSettings()">
|
||
<span class="material-icons">settings</span>
|
||
<span class="tooltip">设置</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索组件 -->
|
||
<div class="component" id="search-component">
|
||
<h2>搜索歌曲</h2>
|
||
<input type="text" id="search" class="search-input" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)">
|
||
<label for="music-name" id="music-name-label" style="display: none;">确认选择:</label>
|
||
<select id="music-name" style="display: none;">
|
||
<!-- 动态生成选项 -->
|
||
</select>
|
||
<input id="music-filename" type="text" placeholder="请输入保存为的文件名称(如:周杰伦七里香)" style="display: none;"></input>
|
||
<div class="component-button-group">
|
||
<button onclick="confirmSearch()">确定</button>
|
||
<button onclick="toggleSearch()">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 定时关机组件 -->
|
||
<div class="component" id="timer-component">
|
||
<h2>定时关机</h2>
|
||
|
||
<button onclick="timedShutDown('10分钟后关机')">10分钟后关机</button>
|
||
<button onclick="timedShutDown('30分钟后关机')">30分钟后关机</button>
|
||
<button onclick="timedShutDown('60分钟后关机')">60分钟后关机</button>
|
||
<span class="tooltip timer-tooltip" style="display: none;">已发送指令</span>
|
||
<div class="component-button-one">
|
||
<button onclick="toggleTimer()">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 播放链接组件 -->
|
||
<div class="component" id="playlink-component">
|
||
<h2>播放链接</h2>
|
||
<input type="text" id="music-url" class="search-input" placeholder="请输入播放链接"
|
||
value="https://lhttp.qtfm.cn/live/4915/64k.mp3">
|
||
<div class="component-button-group">
|
||
<button id="playurl">播放链接</button>
|
||
<button onclick="togglePlayLink()">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 音量组件 -->
|
||
<div class="component" id="volume-component">
|
||
<h2>调节音量</h2>
|
||
<input type="range" id="volume" class="volume-slider" />
|
||
<div class="component-button-one">
|
||
<button onclick="toggleVolume()">关闭</button>
|
||
</div>
|
||
</div>
|
||
<!-- 删除确认组件 -->
|
||
<div class="component" id="delete-component">
|
||
<h2>警告</h2>
|
||
<p>你确定要删除歌曲 <span id="delete-music-name"></span> 吗？</p>
|
||
<p style="font-weight: bold;">注意：该操作会永久删除该歌曲且不可撤销</p>
|
||
<div class="component-button-group">
|
||
<button onclick="confirmDelete()">确定</button>
|
||
<button onclick="toggleDelete()">关闭</button>
|
||
</div>
|
||
</div>
|
||
<!-- 警告组件 -->
|
||
<div class="component" id="warning-component">
|
||
<h2>警告</h2>
|
||
<p>当前页面的HOST与设置中的HOST不一致，请检查是否设置错误</p>
|
||
<p>当前HOST: <span id="local-host"></span></p>
|
||
<p>设置中的HOST: <span id="setting-host"></span></p>
|
||
<div class="component-button-group">
|
||
<a href="./setting.html" target="_blank"><button>立即修改</button></a>
|
||
<button onclick="nowarning()">继续并不再显示</button>
|
||
<button onclick="toggleWarning()">取消</button>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
Powered by XiaoMusic
|
||
</div>
|
||
|
||
<script src="./md.js">
|
||
</script>
|
||
</body>
|
||
|
||
</html> |