求助：使用jQuery无法触发MP3播放，点击按钮仅输出日志无音频

核心问题：未执行播放方法 #

你的代码里最关键的错误是仅引用了play方法但未触发执行——document.getElementById("audio").play只是拿到了方法的引用，没有实际调用，必须加上括号才能执行播放：document.getElementById("audio").play()。

修正后的jQuery代码 #

$('.btn_player').click(function(event) {
    event.preventDefault();
    console.log('button audio player clicked');
    // 添加括号，调用play方法
    document.getElementById("audio").play();
});

额外优化建议 #

1. 统一用jQuery语法获取元素：

$('.btn_player').click(function(event) {
    event.preventDefault();
    console.log('button audio player clicked');
    // jQuery对象是集合，需通过[0]获取原生DOM元素调用play
    $('#audio')[0].play();
});

2. 实现播放/暂停切换（可选）：

$('.btn_player').click(function(event) {
    event.preventDefault();
    const audio = $('#audio')[0];
    if (audio.paused) {
        audio.play();
        $(this).find('i').removeClass('fa-play').addClass('fa-pause');
    } else {
        audio.pause();
        $(this).find('i').removeClass('fa-pause').addClass('fa-play');
    }
});

3. 处理音频加载状态：
   可以监听canplay事件，确保音频加载完成后再允许播放：

$('#audio').on('canplay', function() {
    console.log('音频加载完成，可正常播放');
});

4. 排查跨域问题：
   如果你的页面域名和音频文件域名不一致，可能触发CORS限制导致无法播放。可确认音频服务器是否允许跨域访问，或将音频文件迁移到自身服务器。

完整可运行测试代码 #

<div class='test'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <span class="btn btn-sm btn-success btn_player" href="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3" id="player">
        play me
        <audio id="audio" controls style="display:none">
            <source src='http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'>
        </audio>
        <i class="fad fa-play"></i>
    </span>
</div>

<script>
$('.btn_player').click(function(event) {
    event.preventDefault();
    console.log('button audio player clicked');
    $('#audio')[0].play();
});
</script>

内容的提问来源于stack exchange，提问作者Harkayn