最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】Bootstrap+jquery中添加好看好用的音频播放器

jQuery crifan 4798浏览 0评论

折腾:

【已解决】本地搭建前端Web页面实现机器人问答的产品演示

期间,去找个 好看又好用的,音频播放器。

对于返回的音频比如mp3的url,可以直接播放

且支持通过js代码去控制:播放,暂停,继续播放等

Bootstrap UI中音频控件

想要实现在Bootstrap UI中添加一个音频播放按钮,最好在实时显示时间和操作按钮的功能

bootstrap 音频

Bootstrap 多媒体对象 | 菜鸟教程

HTML 音频(Audio) | 菜鸟教程

组件 · Bootstrap

Bootstrap组件 – 多媒体对象 – 简书

基于jquery和bootstrap的音乐播放器插件vpplayer_jQuery之家-自由分享jQuery、html5、css3的插件库

bootstrap audio

bootstrap-player : Live Demo

还不错

源代码:

WilliamRandol/bootstrap-player: A Non-Intrusive HTML5 Audio Player Skin For Twitter Bootstrap

iainhouston/bootstrap3_player: An HTML5 Audio Player Skin For Twitter Bootstrap 3

Responsive Audio Player

貌似更加简洁

How to Embed Audio in HTML5 – Tutorial Republic

10 jQuery HTML5 Audio Players — SitePoint

-》

MediaElement.js – HTML5 video and audio unification framework

Bootstrap responsive audio player – Stack Overflow

好像直接用:

<code>      &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"&gt;
        &lt;p class="titles"&gt;Bird Wings&lt;/p&gt;
        &lt;audio class="audio controls"&gt;
        &lt;source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg"&gt;
        Your browser does not support the audio element.
        &lt;/audio&gt;
      &lt;/div&gt;
</code>

就可以正常显示:

了?

bootstrap audio player

bootstrap music player

Bootstrap 4 Audio Player With Playlist – jQuery audioPlayer.js | Free jQuery Plugins

带图片的,不要。

Bootstrap 3 – Responsive mp3 audio – Stack Overflow

audio.js

太简陋的感觉

iainhouston/bootstrap3_player: An HTML5 Audio Player Skin For Twitter Bootstrap 3

看起来不错,可以通过选项控制是否显示图片,也有其他如播放,音量等控制按钮,

bootstrap3_player demo

bootstrap-player : Live Demo

Bootstrap Snippet Circle Audio Player using HTML CSS Bootstrap jQuery | Bootsnipp.com

jQuery audio player Plugins | jQuery Script

有很多,但是貌似都没有前面那个简洁。

所以就去用:

https://github.com/iainhouston/bootstrap3_player

-》

http://playerdemo.iainhouston.com

看到了”Forked from William Randol’s bootstrap-player“ 我说看起来和:

http://williamrandol.github.io/bootstrap-player/demo/

一样呢。

去下载和合并到项目里

【已解决】将音频播放器bootstrap3_player整合到bootstrap4中出错:tooltip.js Uncaught TypeError No method named fixTitle

但是好像显示的有问题啊:

【已解决】bootstrap中音频播放器bootstrap3_player显示异常

结果倒是把之前正常显示的bootstrap4的一些元素,显示不太正常了:

去看看文档:

JavaScript · Bootstrap 3.3.1 Documentation – BootstrapDocs

Getting started · Bootstrap 3.3.1 Documentation – BootstrapDocs

CSS · Bootstrap 3.3.1 Documentation – BootstrapDocs

去换成jquery 1.11.1的jquery

jQuery 1.11.1 and 2.1.1 Released | Official jQuery Blog

然后基本上可以能看到界面了:

然后点击也可以正常播放了:

点击可以暂停,音量可以mute,都正常。

但是后来出现其他问题:

【已解决】jquery的js中无法设置audio的source的src和type属性

然后就是优化程序代码,去播放或停止了。

然后可以用:

<code>
if (respJsonObj) {
    if (respJsonObj["data"]) {
        var dataControl = respJsonObj["data"]["control"];
        console.log("dataControl=%o", dataControl);

        var audioElt = $(".audio_player audio");
        console.log("audioElt=%o", audioElt);
        var audioObject = audioElt[0];
        console.log("audioObject=%o", audioObject);

        if (dataControl === "stop") {
            //audioObject.stop();
            audioObject.pause();
            console.log("has pause audioObject=%o", audioObject);
        } else if (dataControl === "continue") {
            // // audioObject.load();
            // audioObject.play();
            // // audioObject.continue();
            // console.log("has load and play audioObject=%o", audioObject);

            var playAudioResult = audioObject.play();
            console.log("playAudioResult=%o", playAudioResult);
        }

        if (respJsonObj["data"]["audio"]) {
            var audioDict = respJsonObj["data"]["audio"];
            console.log("audioDict=%o", audioDict);

            var audioName = audioDict["name"];
            console.log("audioName=%o", audioName);
            var audioSize = audioDict["size"];
            console.log("audioSize=%o", audioSize);
            var audioType = audioDict["contentType"];
            console.log("audioType=%o", audioType);
            var audioUrl = audioDict["url"];
            console.log("audioUrl=%o", audioUrl);

            var isAudioEmpty = (!audioName &amp;&amp; !audioSize &amp;&amp; !audioType &amp;&amp; !audioUrl)
            console.log("isAudioEmpty=%o", isAudioEmpty);

            if (isAudioEmpty) {
                // var pauseAudioResult = audioObject.pause();
                // console.log("pauseAudioResult=%o", pauseAudioResult);

                // audioElt.attr("data-info-att", "");
                // $(".col-sm-offset-1").text("");
            } else {
                if (audioName) {
                    audioElt.attr("data-info-att", audioName);
                    $(".col-sm-offset-1").text(audioName);
                }

                if (audioType) {
                    $(".audio_player audio source").attr("type", audioType);
                }

                if (audioUrl) {
                    $(".audio_player audio source").attr("src", audioUrl);

                    audioObject.load();
                    console.log("has load audioObject=%o", audioObject);
                }

                console.log("dataControl=%s,audioUrl=%s", dataControl, audioUrl);

                if ((dataControl === "") &amp;&amp; audioUrl) {
                    var playAudioResult = audioObject.play();
                    console.log("playAudioResult=%o", playAudioResult);
                } else if ((dataControl === "next") &amp;&amp; (audioUrl)) {
                    var playAudioResult = audioObject.play();
                    console.log("playAudioResult=%o", playAudioResult);
                }
            }
        } else {
            console.log("empty respJsonObj['data']['audio']=%o", respJsonObj["data"]["audio"]);
        }
    } else{
        console.warn("empty respJsonObj['data']=%o", respJsonObj["data"]);
    }
} else{
    console.warn("empty respJsonObj=%o", respJsonObj);
}

</code>

去暂停或继续播放了。

但是界面上,有些没有居中对齐:

再去调试看看。

去掉row:

<code>&lt;div class="audio_player col-md-12 col-xs-12"&gt;
</code>

即可:

【总结】

至此,实现了基本的Bootstrap+jquery的音频播放器。

完整代码是:

static/robotDemo.html

<code>  &lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href="css/bootstrap-3.3.1/bootstrap.css"&gt;
  &lt;!-- &lt;link rel="stylesheet" href="css/highlightjs_default.css"&gt; --&gt;
  &lt;link rel="stylesheet" href="css/highlight_atom-one-dark.css"&gt;
  &lt;!-- &lt;link rel="stylesheet" href="css/highlight_monokai-sublime.css"&gt; --&gt;
  &lt;link rel="stylesheet" href="css/bootstrap3_player.css"&gt;
  &lt;link rel="stylesheet" href="css/main.css"&gt;

&lt;/head&gt;

</code>

<div class=”audio_player col-md-12 col-xs-12″>

    <audio

        controls

        data-info-att=”Audio: Horse”>

        <source src=”http://www.w3schools.com/html/horse.mp3″ type=”audio/mpeg” />

    </audio>

</div>

    <!– Optional JavaScript –>

    <!– jQuery first, then Popper.js, then Bootstrap JS –>

    <!– <script src=”js/jquery-3.3.1.js”></script> –>

    <!– <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> –>

    <script src=”js/jquery/1.11.1/jquery-1.11.1.js”></script>

    <!– <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script> –>

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js” integrity=”sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ” crossorigin=”anonymous”></script>

    <!– <script src=”js/bootstrap.js”></script> –>

    <script src=”js/bootstrap-3.3.1/bootstrap.js”></script>

    <script src=”js/highlight.js”></script>

    <script src=”js/bootstrap3_player.js”></script>

    <script src=”js/main.js”></script>

  </body>

</html>

static/css/main.css

<code>
#response {
    /*width: 96%;*/
    height: 380px;
    border-radius: 10px;
    padding-top: 20px;

    /*padding-left: 1%;*/
    /*padding-right: 1%;*/
}

.audio_player {
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;

    padding-left: 1%;
    padding-right: 1%;
}
</code>

static/js/main.js

<code>$(document).ready(function(){

    $('[data-toggle="tooltip"]').tooltip();

    $("#submitInput").click(function(event){
        event.preventDefault();

        ajaxSubmitInput();
    });
    
    function ajaxSubmitInput() {
        console.log("ajaxSubmitInput");

        var inputRequest = $("#inputRequest").val();
        console.log("inputRequest=%s", inputRequest);
        var encodedInputRequest = encodeURIComponent(inputRequest)
        console.log("encodedInputRequest=%s", encodedInputRequest);

        var qaUrl = "http://47.96.131.109:32851/qa";
        console.log("qaUrl=%s", qaUrl);
        var fullQaUrl = qaUrl + "?input=" + encodedInputRequest
        console.log("fullQaUrl=%s", fullQaUrl);

        $.ajax({
           type : "GET",
           url : fullQaUrl,
           success: function(respJsonObj){
                console.log("respJsonObj=%o", respJsonObj);

                // var respnJsonStr = JSON.stringify(respJsonObj);
                //var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, '\t');
                var beautifiedJespnJsonStr = JSON.stringify(respJsonObj, null, 2);
                console.log("beautifiedJespnJsonStr=%s", beautifiedJespnJsonStr);

                var prevOutputValue = $('#response').text();
                console.log("prevOutputValue=%o", prevOutputValue);
                var afterOutputValue = $('#response').html('&lt;pre&gt;&lt;code class="json"&gt;' + beautifiedJespnJsonStr + "&lt;/code&gt;&lt;/pre&gt;");
                console.log("afterOutputValue=%o", afterOutputValue);

                if (respJsonObj) {
                    if (respJsonObj["data"]) {
                        var dataControl = respJsonObj["data"]["control"];
                        console.log("dataControl=%o", dataControl);

                        var audioElt = $(".audio_player audio");
                        console.log("audioElt=%o", audioElt);
                        var audioObject = audioElt[0];
                        console.log("audioObject=%o", audioObject);

                        if (dataControl === "stop") {
                            //audioObject.stop();
                            audioObject.pause();
                            console.log("has pause audioObject=%o", audioObject);
                        } else if (dataControl === "continue") {
                            // // audioObject.load();
                            // audioObject.play();
                            // // audioObject.continue();
                            // console.log("has load and play audioObject=%o", audioObject);

                            var playAudioResult = audioObject.play();
                            console.log("playAudioResult=%o", playAudioResult);
                        }

                        if (respJsonObj["data"]["audio"]) {
                            var audioDict = respJsonObj["data"]["audio"];
                            console.log("audioDict=%o", audioDict);

                            var audioName = audioDict["name"];
                            console.log("audioName=%o", audioName);
                            var audioSize = audioDict["size"];
                            console.log("audioSize=%o", audioSize);
                            var audioType = audioDict["contentType"];
                            console.log("audioType=%o", audioType);
                            var audioUrl = audioDict["url"];
                            console.log("audioUrl=%o", audioUrl);

                            var isAudioEmpty = (!audioName &amp;&amp; !audioSize &amp;&amp; !audioType &amp;&amp; !audioUrl)
                            console.log("isAudioEmpty=%o", isAudioEmpty);

                            if (isAudioEmpty) {
                                // var pauseAudioResult = audioObject.pause();
                                // console.log("pauseAudioResult=%o", pauseAudioResult);

                                // audioElt.attr("data-info-att", "");
                                // $(".col-sm-offset-1").text("");
                            } else {
                                if (audioName) {
                                    audioElt.attr("data-info-att", audioName);
                                    $(".col-sm-offset-1").text(audioName);
                                }

                                if (audioType) {
                                    $(".audio_player audio source").attr("type", audioType);
                                }

                                if (audioUrl) {
                                    $(".audio_player audio source").attr("src", audioUrl);

                                    audioObject.load();
                                    console.log("has load audioObject=%o", audioObject);
                                }

                                console.log("dataControl=%s,audioUrl=%s", dataControl, audioUrl);

                                if ((dataControl === "") &amp;&amp; audioUrl) {
                                    var playAudioResult = audioObject.play();
                                    console.log("playAudioResult=%o", playAudioResult);
                                } else if ((dataControl === "next") &amp;&amp; (audioUrl)) {
                                    var playAudioResult = audioObject.play();
                                    console.log("playAudioResult=%o", playAudioResult);
                                }
                            }
                        } else {
                            console.log("empty respJsonObj['data']['audio']=%o", respJsonObj["data"]["audio"]);
                        }
                    } else{
                        console.warn("empty respJsonObj['data']=%o", respJsonObj["data"]);
                    }
                } else{
                    console.warn("empty respJsonObj=%o", respJsonObj);
                }

                updateHighlight();
           },
           error : function(err) {
              $("#output").html("&lt;strong&gt;Error&lt;/strong&gt;");
              console.log("GET: ", qaUrl, " ERROR: ", err);
           }
        });
    }

});
</code>

界面效果是:

初始时:

点击提交,获得响应后:

然后可以点击暂停,也可以通过代码控制暂停播放:

转载请注明:在路上 » 【已解决】Bootstrap+jquery中添加好看好用的音频播放器

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.185 seconds, using 22.17MB memory