mirror of
https://github.com/hanxi/xiaomusic.git
synced 2026-04-25 22:29:53 +08:00
254 lines
13 KiB
HTML
Vendored
254 lines
13 KiB
HTML
Vendored
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>小爱音箱操控面板</title>
|
||
<!-- 预加载字体文件，减少加载延迟 -->
|
||
<link rel="preload" href="./materialicons.woff2" as="font" type="font/woff2" crossorigin>
|
||
<link rel="preload" href="./materialiconsoutlined.woff2" as="font" type="font/woff2" crossorigin>
|
||
<script src="./jquery-3.7.1.min.js?version=1773930508"></script>
|
||
<link rel="stylesheet" href="./main.css?version=1773930508">
|
||
<link rel="icon" href="./favicon.ico">
|
||
|
||
<!-- Google tag (gtag.js) -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z09NC1K7ZW"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag() { dataLayer.push(arguments) };
|
||
gtag('js', new Date());
|
||
gtag('config', 'G-Z09NC1K7ZW');
|
||
</script>
|
||
|
||
<!-- umami -->
|
||
<!-- <script async defer src="https://umami.hanxi.cc/script.js" data-website-id="7bfb0890-4115-4260-8892-b391513e7e99"></script> -->
|
||
</head>
|
||
|
||
<body class="index_page">
|
||
<div class="player" role="main" aria-label="音乐播放器">
|
||
<h1>小爱音箱播放器
|
||
<a href="https://xdocs.hanxi.cc/issues/changelog.html" target="_blank" class="version-link"><span id="version">0.4.0</span><span id="versionnew" class="new-badge"></span></a>
|
||
</h1>
|
||
|
||
<label for="did" class="label-with-toggle">选择播放设备:
|
||
<div class="toggle-switch-container">
|
||
<label class="toggle-label">语音口令</label>
|
||
<div id="pullAskToggle" class="toggle-switch" role="switch" aria-checked="false" aria-label="语音口令开关" onclick="togglePullAsk()" tabindex="0">
|
||
<div class="toggle-slider"></div>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
<select id="did" class="device-selector" aria-label="选择播放设备">
|
||
<option value="default">默认设备</option>
|
||
</select>
|
||
|
||
<label for="music_list" class="label-with-action">选择播放列表:
|
||
<div class="option-inline" onclick="refreshlist()" role="button" aria-label="刷新播放列表" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">refresh</span>
|
||
<span class="tooltip">刷新列表</span>
|
||
</div>
|
||
</label>
|
||
<select id="music_list" class="playlist-selector" aria-label="选择播放列表">
|
||
</select>
|
||
|
||
<label for="music_name" class="label-with-action">选择歌曲:
|
||
<div class="action-buttons">
|
||
<div class="option-inline" onclick="triggerUpload()" role="button" aria-label="上传歌曲" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">file_upload</span>
|
||
<span class="tooltip">上传歌曲</span>
|
||
</div>
|
||
<div class="option-inline" onclick="toggleDelete()" role="button" aria-label="删除歌曲" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">delete</span>
|
||
<span class="tooltip">删除歌曲</span>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
<select id="music_name" class="song-selector" aria-label="选择歌曲">
|
||
</select>
|
||
|
||
<input id="upload-file" type="file" accept=".mp3,.m4a,.wav,.flac,.aac,.ogg,.ape" class="hidden-input" />
|
||
|
||
<div id="device-audio" class="audio-section">
|
||
<progress class="progress" id="progress" value="0" max="100" role="progressbar" aria-label="播放进度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="未播放"></progress>
|
||
<div class="time-info">
|
||
<span class="current-time" id="current-time">0:00</span>
|
||
<div class="current-song" id="playering-music">当前播放歌曲：无</div>
|
||
<span class="duration" id="duration">00:00</span>
|
||
</div>
|
||
</div>
|
||
<audio id="audio" controls src="" autoplay class="hidden-audio"></audio>
|
||
|
||
<div class="buttons">
|
||
<div class="player-controls button-group">
|
||
<div id="modeBtn" onclick="togglePlayMode()" class="control-button device-enable" role="button" aria-label="切换播放模式" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">shuffle</span>
|
||
<span class="tooltip">切换播放模式</span>
|
||
</div>
|
||
<div onclick="prevTrack()" class="control-button device-enable" role="button" aria-label="上一首" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">skip_previous</span>
|
||
<span class="tooltip">上一首</span>
|
||
</div>
|
||
<div onclick="play()" class="control-button" role="button" aria-label="播放" tabindex="0">
|
||
<span class="material-icons-outlined play" aria-hidden="true">play_circle_outline</span>
|
||
<span class="tooltip">播放</span>
|
||
</div>
|
||
<div onclick="nextTrack()" class="control-button device-enable" role="button" aria-label="下一首" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">skip_next</span>
|
||
<span class="tooltip">下一首</span>
|
||
</div>
|
||
<div onclick="stopPlay()" class="control-button device-enable" role="button" aria-label="关机" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">stop</span>
|
||
<span class="tooltip">关机</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="mode-controls button-group">
|
||
<div onclick="addToFavorites()" class="favorite icon-item device-enable" role="button" aria-label="收藏歌曲" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">favorite</span>
|
||
<p>收藏</p>
|
||
</div>
|
||
<div onclick="toggleVolume()" class="icon-item device-enable" role="button" aria-label="调节音量" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">volume_up</span>
|
||
<p>音量</p>
|
||
</div>
|
||
<div onclick="toggleSearch()" class="icon-item device-enable" role="button" aria-label="搜索歌曲" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">search</span>
|
||
<p>搜索</p>
|
||
</div>
|
||
<div onclick="toggleTimer()" class="icon-item device-enable" role="button" aria-label="定时关机" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">timer</span>
|
||
<p>定时</p>
|
||
</div>
|
||
<div onclick="togglePlayLink()" class="icon-item device-enable" role="button" aria-label="播放链接测试" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">emoji_nature</span>
|
||
<p>测试</p>
|
||
</div>
|
||
<div onclick="openSettings()" class="icon-item" role="button" aria-label="打开设置" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">settings</span>
|
||
<p>设置</p>
|
||
</div>
|
||
<div onclick="goOnlineSearch()" class="icon-item device-enable" role="button" aria-label="在线音乐搜索" tabindex="0">
|
||
<span class="material-icons" aria-hidden="true">music_note</span>
|
||
<p>在线搜索</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗遮罩层 -->
|
||
<div class="component-overlay" id="component-overlay" onclick="closeAllDialogs()"></div>
|
||
|
||
<!-- 搜索组件 -->
|
||
<div class="component" id="search-component" role="dialog" aria-modal="true" aria-labelledby="search-title">
|
||
<h2 id="search-title">搜索歌曲</h2>
|
||
<input type="text" id="search" class="search-input" placeholder="请输入搜索关键词(如:MV高清版 周杰伦 七里香)">
|
||
<label for="music-name">搜索结果:</label>
|
||
<div id="music-name" class="search-results"></div>
|
||
<input id="music-filename" type="text" placeholder="请输入保存为的文件名称(可选)" style="display: none;"></input>
|
||
<div class="component-button-group">
|
||
<button onclick="confirmSearch()">确定</button>
|
||
<button onclick="toggleSearch()" class="close-button">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 定时关机组件 -->
|
||
<div class="component" id="timer-component" role="dialog" aria-modal="true" aria-labelledby="timer-title">
|
||
<h2 id="timer-title">定时关机</h2>
|
||
|
||
<button onclick="timedShutDown('10分钟后关机')">10分钟后关机</button>
|
||
<button onclick="timedShutDown('30分钟后关机')">30分钟后关机</button>
|
||
<button onclick="timedShutDown('60分钟后关机')">60分钟后关机</button>
|
||
<span class="tooltip timer-tooltip hidden-element">已发送指令</span>
|
||
<div class="component-button-one">
|
||
<button onclick="toggleTimer()" class="close-button">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 播放链接组件 -->
|
||
<div class="component" id="playlink-component" role="dialog" aria-modal="true" aria-labelledby="playlink-title">
|
||
<h2 id="playlink-title">播放测试</h2>
|
||
|
||
<!-- 播放链接卡片 -->
|
||
<div class="card-section">
|
||
<h3 class="card-title">🔗 播放链接</h3>
|
||
<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 onclick="playUrl()">播放链接</button>
|
||
<button onclick="playProxyUrl()">代理播放</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 播放文字卡片 -->
|
||
<div class="card-section">
|
||
<h3 class="card-title">💬 播放文字</h3>
|
||
<input type="text" id="text-tts" class="search-input" placeholder="请输入文字" value="播放文字测试">
|
||
<div class="component-button-group">
|
||
<button onclick="playTts()">播放文字</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自定义口令卡片 -->
|
||
<div class="card-section">
|
||
<h3 class="card-title">🎤 自定义口令</h3>
|
||
<input type="text" id="custom-cmd" class="search-input" placeholder="请输入自定义口令" value="">
|
||
<div class="component-button-group">
|
||
<button onclick="sendCustomCmd()">发送口令</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="component-button-one">
|
||
<button onclick="togglePlayLink()" class="close-button">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 音量组件 -->
|
||
<div class="component" id="volume-component" role="dialog" aria-modal="true" aria-labelledby="volume-title">
|
||
<h2 id="volume-title">调节音量</h2>
|
||
<input type="range" id="volume" class="volume-slider" aria-label="音量" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" />
|
||
<div class="component-button-one">
|
||
<button onclick="toggleVolume()" class="close-button">关闭</button>
|
||
</div>
|
||
</div>
|
||
<!-- 删除确认组件 -->
|
||
<div class="component" id="delete-component" role="dialog" aria-modal="true" aria-labelledby="delete-title">
|
||
<h2 id="delete-title">警告</h2>
|
||
<p>你确定要删除歌曲 <span id="delete-music-name"></span> 吗？</p>
|
||
<p class="warning-text">注意：该操作会永久删除该歌曲且不可撤销</p>
|
||
<div class="component-button-group">
|
||
<button onclick="confirmDelete()">确定</button>
|
||
<button onclick="toggleDelete()" class="close-button">关闭</button>
|
||
</div>
|
||
</div>
|
||
<!-- 警告组件 -->
|
||
<div class="component" id="warning-component" role="dialog" aria-modal="true" aria-labelledby="warning-title">
|
||
<h2 id="warning-title">警告</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" role="contentinfo">
|
||
Powered by XiaoMusic
|
||
</div>
|
||
|
||
<!-- 屏幕阅读器状态通知区域 -->
|
||
<div id="sr-announcer" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>
|
||
|
||
<script src="./md.js?version=1773930508">
|
||
</script>
|
||
<script>
|
||
function goOnlineSearch() {
|
||
window.location.href = "/static/onlineSearch/index.html";
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|