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

Posted 2020-11-24 koaler

首先引入一个文件

 

 引入一个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;
        }
    }

好了这里就是一个简单的播放音乐文件的代码了，祝小伙伴们学习愉快！