SpringBoot + thymeleaf + html + mp3 player is a simple javascript function to achieve

First, the introduction of a file

 

 The introduction of an mp3 file to static / mp3 folder

Then introduced in the mp3 html file, pay attention, when introduced here, do not put music labels written in html js embedded in html form, but write directly to the html inside,

Because references inside html th thymeleaf template file used: src can only import static seems, can not introduce dynamic, I also was successful commissioning html inside play music

  </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>

Like this,

Js code files and then play in the following

the playSound function = var () { 

        var borswer window.navigator.userAgent.toLowerCase = (); 
        IF (borswer.indexOf ( "IE")> = 0) 
        { 
            // IEs browser kernel 
            var = the embed document.embedPlay; 
            // browser does not support audion, using embed player 
            embed.volume = 100; 
            embed.play (); 
            SLEEP (3000); 
        } the else 
        { 
            var = document.getElementById Audio ( "AudioPlay"); 
             // browser supports Audio 
            Audio. Play (); 
            SLEEP (3000); 
        } 
    };

Direct call like, pay attention here, where the code plus some sleep, I sleep music files about 3 seconds to play finished,

If not, it is no way to play a direct jump over.

function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }

Well, here is a simple code to play music files, and I wish to learn little friends happy!

Guess you like

Origin www.cnblogs.com/Koaler/p/11972194.html