折腾：
期间，去找个 好看又好用的，音频播放器。
对于返回的音频比如mp3的url，可以直接播放
且支持通过js代码去控制：播放，暂停，继续播放等
Bootstrap UI中音频控件
想要实现在Bootstrap UI中添加一个音频播放按钮，最好在实时显示时间和操作按钮的功能
bootstrap 音频
基于jquery和bootstrap的音乐播放器插件vpplayer_jQuery之家-自由分享jQuery、html5、css3的插件库
bootstrap audio
还不错
源代码：
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
貌似更加简洁
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> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"> <p class="titles">Bird Wings</p> <audio class="audio controls"> <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </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
太简陋的感觉
iainhouston/bootstrap3_player: An HTML5 Audio Player Skin For Twitter Bootstrap 3
看起来不错，可以通过选项控制是否显示图片，也有其他如播放，音量等控制按钮，
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 && !audioSize && !audioType && !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 === "") && audioUrl) {
var playAudioResult = audioObject.play();
console.log("playAudioResult=%o", playAudioResult);
} else if ((dataControl === "next") && (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><div class="audio_player col-md-12 col-xs-12"> </code>
即可：
【总结】
至此，实现了基本的Bootstrap+jquery的音频播放器。
完整代码是：
static/robotDemo.html
<code> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap-3.3.1/bootstrap.css"> <!-- <link rel="stylesheet" href="css/highlightjs_default.css"> --> <link rel="stylesheet" href="css/highlight_atom-one-dark.css"> <!-- <link rel="stylesheet" href="css/highlight_monokai-sublime.css"> --> <link rel="stylesheet" href="css/bootstrap3_player.css"> <link rel="stylesheet" href="css/main.css"> </head> </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('<pre><code class="json">' + beautifiedJespnJsonStr + "</code></pre>");
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 && !audioSize && !audioType && !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 === "") && audioUrl) {
var playAudioResult = audioObject.play();
console.log("playAudioResult=%o", playAudioResult);
} else if ((dataControl === "next") && (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("<strong>Error</strong>");
console.log("GET: ", qaUrl, " ERROR: ", err);
}
});
}
});
</code>界面效果是：
初始时：
点击提交，获得响应后：
然后可以点击暂停，也可以通过代码控制暂停播放：
