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

骑猪看日落 2022-11-25 04:24 169阅读 0赞

![20200807135900594.png][]

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();
                }
            };

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

![20200807150607450.png][]

点击设置不自动播放即可

[20200807135900594.png]: /images/20221124/a8fbebbada7a46d5828f55802d3470b9.png
[20200807150607450.png]: /images/20221124/8cfa8b6cb41c4678b1eb39ebaab322a4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关【Objective_C】类的总结+实现简单的button点击功能

一、创建步骤 1.打开xcode ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

以你之姓@/ 2022年12月04日 08:31/ 0 赞/ 161 阅读

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

![20200807135900594.png][] MP3文件所在目录页面按钮 <button class="search-btn primary" type

骑猪看日落/ 2022年11月25日 04:24/ 0 赞/ 170 阅读

相关 MediaPlayer 播放 MP3文件的简单使用

1.音频文件在/res/raw目录下 MediaPlayer mediaPlayer = MediaPlayer.create(context, R.raw.soun

谁借莪１个温暖的怀抱￠/ 2022年09月25日 03:28/ 0 赞/ 246 阅读

相关 java实现一个录音播放的功能

需求： 1.实现可以从麦克风进行录音 2.可以停止录音 3.实现播放录音内容 4.并将所录的mp3文件全部存到F：/语音文件夹，语音的文件名以当前时间命名(java中是

喜欢ヅ旅行/ 2022年09月18日 12:49/ 0 赞/ 186 阅读

相关 Mp3Player播放MP3音乐文件

package com.imooc.test; import java.io.BufferedInputStream; import

曾经终败给现在/ 2022年08月21日 04:52/ 0 赞/ 296 阅读

相关 Java实现播放Mp3的功能

这里需要导入一个jar包：[jl1.0.1.jar][] import java.io.BufferedInputStream; import java.io

港控/mmm°/ 2022年06月08日 12:11/ 0 赞/ 299 阅读

相关 ionic中的在线mp3播放功能

Audio模块中的html 关键代码： <ion-view class="audio" cache-view="false"> <ion-hea

深藏阁楼爱情的钟/ 2022年05月27日 12:55/ 0 赞/ 213 阅读

相关 VC播放mp3的方法

[VC播放mp3的方法][VC_mp3] 1、使用msi库 ![复制代码][copycode.gif] include <mmsystem.h>

落日映苍穹つ/ 2022年05月22日 03:00/ 0 赞/ 245 阅读

相关简单实现点击图片放大的功能

背景：想在app中加上点击缩略图放大的效果，但是不想导入大量的JS ，也无需哪些复杂的插件，于是自己手写了一个很简单的实现，在这里记下来。代码很简单，还有很多优化空间，时间

朴灿烈づ我的快乐病毒、/ 2022年05月11日 14:20/ 0 赞/ 388 阅读

相关 Mp3Player播放MP3音乐文件

package com.imooc.test; import java.io.BufferedInputStream; import

拼搏现实的明天。/ 2022年04月12日 10:40/ 0 赞/ 346 阅读