[HTML]播放wav格式音频
<!doctype html>
<html><head><title>音频播放 - 调试版</title><style>.error { color: red; }.success { color: green; }.debug-info { margin-top: 20px;border: 1px solid #ccc;padding: 10px;background-color: #f9f9f9;}</style></head><body><h1>音频播放 - 调试版</h1><div><h3>方法1: 原生Audio元素</h3><button onclick="playAudioNative()">原生播放</button><audio id="audio-native" controls></audio></div><div><h3>方法2: Fetch + Blob URL</h3><button onclick="playAudioFetch()">Fetch方式播放</button><audio id="audio-fetch" controls></audio></div><div><h3>方法3: XMLHttpRequest</h3><button onclick="playAudioXHR()">XHR方式播放</button><audio id="audio-xhr" controls></audio></div><div><h3>方法4: iframe嵌入</h3><button onclick="showAudioFrame()">iframe方式</button><div id="frame-container"></div></div><div class="debug-info"><h3>调试信息:</h3><div id="debug-log"></div><h3>检查音频文件:</h3><button onclick="checkAudioFile()">检查文件是否存在</button><div id="file-status"></div></div><script>const audioUrl = 'http://127.0.0.1:8080/tts-audio/tts_3691e8bf-1ff9-4b81-804e-ae83546279ce.wav';function log(message, isError = false) {const logElem = document.getElementById('debug-log');const entry = document.createElement('div');entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;if (isError) entry.className = 'error';else entry.className = 'success';logElem.appendChild(entry);console.log(message);}function playAudioNative() {log('尝试使用原生Audio元素播放...');const audio = document.getElementById('audio-native');audio.src = audioUrl;audio.onloadeddata = () => log('音频加载成功，准备播放');audio.onplay = () => log('开始播放');audio.onplaying = () => log('正在播放');audio.onerror = (e) => {const errorMsg = getAudioErrorMessage(audio.error);log(`音频加载错误: ${errorMsg}`, true);};audio.play().catch(err => {log(`播放失败: ${err.message}`, true);});}async function playAudioFetch() {log('尝试使用Fetch方式获取音频...');try {const response = await fetch(audioUrl);if (!response.ok) {log(`服务器响应错误: ${response.status} ${response.statusText}`, true);return;}const blob = await response.blob();log(`获取音频成功，大小: ${(blob.size / 1024).toFixed(2)}KB`);const audio = document.getElementById('audio-fetch');const url = URL.createObjectURL(blob);audio.src = url;audio.onloadeddata = () => log('Blob音频加载成功');audio.onerror = (e) => log(`Blob音频错误: ${getAudioErrorMessage(audio.error)}`, true);audio.play().catch(err => {log(`Blob播放失败: ${err.message}`, true);});} catch (err) {log(`Fetch错误: ${err.message}`, true);}}function playAudioXHR() {log('尝试使用XHR方式获取音频...');const xhr = new XMLHttpRequest();xhr.open('GET', audioUrl, true);xhr.responseType = 'blob';xhr.onload = function() {if (xhr.status === 200) {log(`XHR获取音频成功，大小: ${(xhr.response.size / 1024).toFixed(2)}KB`);const audio = document.getElementById('audio-xhr');const url = URL.createObjectURL(xhr.response);audio.src = url;audio.onloadeddata = () => log('XHR音频加载成功');audio.onerror = (e) => log(`XHR音频错误: ${getAudioErrorMessage(audio.error)}`, true);audio.play().catch(err => {log(`XHR播放失败: ${err.message}`, true);});} else {log(`XHR错误: ${xhr.status} ${xhr.statusText}`, true);}};xhr.onerror = function() {log('XHR网络错误', true);};xhr.send();}function showAudioFrame() {log('尝试使用iframe嵌入音频...');const container = document.getElementById('frame-container');container.innerHTML = `<iframe src="${audioUrl}" width="300" height="100"></iframe>`;log('已加载iframe');}async function checkAudioFile() {const statusElem = document.getElementById('file-status');statusElem.textContent = '正在检查文件...';try {const response = await fetch(audioUrl, { method: 'HEAD' });if (response.ok) {const contentType = response.headers.get('content-type') || '未知';const contentLength = response.headers.get('content-length') || '未知';statusElem.innerHTML = `<div class="success">文件存在!</div><div>Content-Type: ${contentType}</div><div>Content-Length: ${contentLength} 字节</div>`;const cors = response.headers.get('access-control-allow-origin');if (cors) {statusElem.innerHTML += `<div>CORS: ${cors}</div>`;} else {statusElem.innerHTML += `<div class="error">警告: 未检测到CORS头</div>`;}} else {statusElem.innerHTML = `<div class="error">文件不存在或无权访问! 状态码: ${response.status}</div>`;}} catch (err) {statusElem.innerHTML = `<div class="error">检查失败: ${err.message}</div>`;}}function getAudioErrorMessage(error) {if (!error) return '未知错误';switch(error.code) {case 1: return 'MEDIA_ERR_ABORTED: 用户中止了获取过程';case 2: return 'MEDIA_ERR_NETWORK: 网络错误导致下载失败';case 3: return 'MEDIA_ERR_DECODE: 解码失败，可能是文件损坏或浏览器不支持的格式';case 4: return 'MEDIA_ERR_SRC_NOT_SUPPORTED: 媒体源不可用或不支持';default: return `未知错误(${error.code})`;}}window.onload = function() {log(`浏览器: ${navigator.userAgent}`);log('页面已加载，请点击按钮测试不同播放方法');};</script></body>
</html>
