首先引入一个文件
引入一个mp3文件到static/mp3文件夹下
然后在html里引入这个mp3文件,注意了,这里引入的时候,不要把html的音乐标签写成js嵌入html的形式,而是直接写入到html里面去,
因为html里面引用文件用的thymeleaf模板的th:src 只能引入静态的好像,不能引入动态的,我也是调试到html里面才成功播放音乐的
</div> <audio id='audioPlay' th:src='@{/mp3/user_download.mp3}' hidden='true'/> <embed name="embedPlay" th:src='@{mp3/user_download.mp3}' autostart="true" hidden="true" loop="false"></embed> </body>
类似于这样,
然后文件播放的js代码在如下
var playSound = function () { var borswer = window.navigator.userAgent.toLowerCase(); if ( borswer.indexOf( "ie" ) >= 0 ) { //IE内核浏览器 var embed = document.embedPlay; //浏览器不支持 audion,则使用 embed 播放 embed.volume = 100; embed.play(); sleep(3000); } else { var audio = document.getElementById("audioPlay"); //浏览器支持 audio audio.play(); sleep(3000); } };
直接调用就好了,这里注意了,这里加一段睡眠时间的代码,我的音乐文件大概休眠3秒钟就可以播放完毕了,
如果不加的话,也是没办法播放的,直接就跳过去了。
function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } }
好了这里就是一个简单的播放音乐文件的代码了,祝小伙伴们学习愉快!