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

首先引入一个文件

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

 

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

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

上一篇:c-py2exe实际上是如何工作的(简单地解释过)? :)


下一篇:SpringBoot使用JSP