wav语音流在safari浏览器或手机浏览器上播放不了怎么办？

原创

已于 2025-10-14 23:21:21 修改 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#safari #智能手机 #前端 #wav语音流 #跨域

于 2025-10-14 23:19:09 首次发布

典型错误：Failed to load resource: 插件处理的载入

通常浏览器对mp3的支持比较友好，我们可以在页面中直接将wav语音流转化为mp3来进行播放。

具体代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WAV转MP3播放（兼容Safari）</title>
    <style>
        .container {
            margin: 20px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        input {
            width: 300px;
            padding: 8px;
            margin-right: 10px;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
            background: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .status {
            margin-top: 15px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- WAV地址输入框 -->
        <input type="text" id="wavUrl" placeholder="请输入WAV流URL（示例：https://xxx.com/audio.wav）" 
               value="https://example.com/test.wav">
        <!-- 操作按钮 -->
        <button id="convertBtn">转换并播放</button>
        <!-- 音频播放控件（隐藏，仅用于播放生成的MP3） -->
        <audio id="audioPlayer" controls style="display: none; margin-top: 15px;"></audio>
        <!-- 状态提示 -->
        <div class="status" id="status"></div>
    </div>

    <!-- 引入LAME.js（MP3编码核心库，建议本地部署） -->
    <script src="https://cdn.jsdelivr.net/npm/lamejs@1.2.1/lame.min.js"></script>
    <script>
        // 页面元素
        const wavUrlInput = document.getElementById('wavUrl');
        const convertBtn = document.getElementById('