111 lines
4.7 KiB
HTML
111 lines
4.7 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>网络音乐播放器</title>
|
||
</head>
|
||
<body>
|
||
<div class="audio-player">
|
||
<!-- 音频URL输入 -->
|
||
<div class="url-input-section">
|
||
<input type="text" id="audioUrl" placeholder="输入网络音乐地址，如：http://music.163.com/song/media/outer/url?id=447925558.mp3" value="/DocServer/repository/file/view/73901-root/last/content?key=1769765152330.mp3">
|
||
<button id="loadAudio">加载音乐</button>
|
||
</div>
|
||
|
||
<!-- 备用音频源 -->
|
||
<div class="test-audio-sources">
|
||
<p style="margin: 10px 0 5px 0; font-size: 12px; color: #666;">测试音频源：</p>
|
||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||
<button class="test-source-btn" data-url="/DocServer/repository/file/view/73904-root/last/content?id=447925558.mp3">本地代理测试1</button>
|
||
<button class="test-source-btn" data-url="/DocServer/repository/file/view/73901-root/last/content?key=1769765152330.mp3">本地代理测试2</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 错误提示 -->
|
||
<div id="errorMessage" class="error-message" style="display: none;"></div>
|
||
|
||
<!-- 加载遮罩层 -->
|
||
<div id="loadingOverlay" class="loading-overlay" style="display: none;"></div>
|
||
|
||
<!-- 加载提示弹出层（简化版） -->
|
||
<div id="loadingMessage" class="loading-message" style="display: none;">
|
||
<!-- 主要加载动画 -->
|
||
<div class="main-loader">
|
||
<div class="circular-progress-simple">
|
||
<svg width="80" height="80">
|
||
<defs>
|
||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<circle class="progress-bg" cx="40" cy="40" r="35"></circle>
|
||
<circle class="progress-bar" cx="40" cy="40" r="35" id="circularProgress"></circle>
|
||
</svg>
|
||
<div class="progress-text" id="circularProgressText">0%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载文字信息 -->
|
||
<div class="loading-info">
|
||
<div class="loading-title" id="loadingTitle">正在加载音频</div>
|
||
<div class="loading-subtitle" id="loadingSubtitle">请稍候...</div>
|
||
</div>
|
||
|
||
<!-- 简单的音乐频谱指示器 -->
|
||
<div class="mini-spectrum">
|
||
<div class="spectrum-bar"></div>
|
||
<div class="spectrum-bar"></div>
|
||
<div class="spectrum-bar"></div>
|
||
<div class="spectrum-bar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 可视化效果 -->
|
||
<div class="visualization-section">
|
||
<canvas id="visualizer" width="100%" height="100%"></canvas>
|
||
<div class="visualization-controls">
|
||
<button class="viz-btn active" data-mode="bars">条形图</button>
|
||
<button class="viz-btn" data-mode="wave">波形图</button>
|
||
<button class="viz-btn" data-mode="circle">圆形频谱</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 播放控制 -->
|
||
<div class="player-controls">
|
||
<div class="time-display">
|
||
<span id="currentTime">00:00</span>
|
||
<span>/</span>
|
||
<span id="duration">00:00</span>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-bar" id="progressBar">
|
||
<div class="progress" id="progress"></div>
|
||
<div class="progress-handle" id="progressHandle"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 控制按钮 -->
|
||
<div class="control-buttons">
|
||
<button id="playPause" class="control-btn">
|
||
<span class="play-icon">▶️</span>
|
||
<span class="pause-icon" style="display: none;">⏸️</span>
|
||
</button>
|
||
<button id="stop" class="control-btn">⏹️</button>
|
||
<div class="volume-control">
|
||
<span class="volume-icon">🔊</span>
|
||
<input type="range" id="volumeSlider" min="0" max="100" value="70" class="volume-slider">
|
||
<span id="volumeValue">70%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 隐藏的音频元素 -->
|
||
<audio id="audioElement" crossorigin="anonymous"></audio>
|
||
</div>
|
||
|
||
<script type="module" src="/src/main.js"></script>
|
||
</body>
|
||
</html> |