SpringBoot+thymeleaf+html+javascript 实现的点击播放mp3简单的一个功能

MP3文件所在目录

页面按钮

 <button class="search-btn primary" type="button" onclick="playmp3()">点击播放</button>
 <audio id='audioPlay' th:src='@{/stc/mp3/query.mp3}'  hidden autostart="false"></audio>
<embed name="embedPlay" th:src='@{/stc/mp3/query.mp3}' autostart="false" hidden="true" loop="false">



function  playmp3() {

            var borswer = window.navigator.userAgent.toLowerCase();
            if ( borswer.indexOf( "ie" ) >= 0 )
            {
                //IE内核浏览器
                var embed = document.embedPlay;
                //浏览器不支持 audion，则使用 embed 播放
                embed.volume = 100;
                embed.play();
            } else
            {
                var audio = document.getElementById("audioPlay");
                //浏览器支持 audio
                audio.play();
            }
        };

 这个过程中遇到个坑，我用谷歌浏览器的时候，浏览器设置的是自动播放加载音视频，所以一进页面不点击也会播放音频

点击设置不自动播放即可