1、頁面來源：sentenceExercise07.jsp

2、頁面效果

3、源代碼

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <%@ include file="/pages/exercise/exerciseFrame.jsp"%><!-- 中間獨(dú)立的部分 --><style type="text/css"> .question_answer { width: 250px;height: 60px;display:inline-block;text-align:center;color:white;overflow:hidden; line-height: 25px;vertical-align: middlel;background-color: #f7931e;cursor: pointer; border-radius: 10px 10px 10px 10px; } .question_answer div{ line-height:25px;text-align:center; } .question_answer_unselected { background-color: #f7931e; } .question_answer_unselected:hover{ background-color: #F15A24; } .question_answer_selected{ background-color: #008000; }.answer_container{ width: 260px; height: 60px; padding: 5px 0; text-align: center; border-radius: 10px 10px 10px 10px; }.answer_container_left{ background-color: gray; }.answer_container_right{ background-color: gray;cursor: pointer; } .judge_img{ width:30px;height:30px;position:absolute;top:0px;left:0px; } .show_answer{visibility:hidden;margin-top:20px;margin-left:10px;"} /*播放按鈕*/.play_btn{ width:30px; height:30px; cursor:pointer; border:none;background: none; background: url("<c:url value='/images/button_play.png'/>") 0px 0px no-repeat; } .play_btn:hover{ background-position: 0px -44px; } .play_btn:active{ background-position: 0px -88px; } .play_btn-diasbled{ border:none;background: none; background: url("<c:url value='/images/button_play.png'/>") 0px -132px no-repeat; }/*暫停按鈕*/ .pause_btn{ cursor:pointer;border:none;background: none; background: url("<c:url value='/images/button_pause.png'/>") 0px 0px no-repeat; } .pause_btn:hover{ background-position: 0px -44px; } .pause_btn:active{ background-position: 0px -88px; } .pause_btn-diasbled{ border:none;background: none; background: url("<c:url value='/images/button_pause.png'/>") 0px -132px no-repeat; } </style> <script type="text/javascript"> var PLAYER_STATUS_STOP = 0;//停止 var PLAYER_STATUS_PLAYING = 1;//正在播放 var PLAYER_STATUS_PAUSE = 2;//暫停 var _movieName = "exerciseAudioPlayer";//flash播放器name var _playerStatus = PLAYER_STATUS_STOP;//播放狀態(tài) var _isLoading = false;//是否正在加載音頻 var _audioLength = 0;//音頻長度 var audioPlay = null;//計(jì)時(shí)$.audioToEndBySec = function(){audioPlay=setTimeout(function(){$.audioToEndBySec();},1000); if(_audioLength==0){//停止計(jì)時(shí)clearTimeout(audioPlay);playToEnd();}else{_audioLength--;} }; /*** MP3準(zhǔn)備完畢可以開始播放*/ function onAudioPrepared(){_isLoading = false;if (_playerStatus == PLAYER_STATUS_PAUSE) {//暫停狀態(tài)直接返回return;}_playerStatus = PLAYER_STATUS_PLAYING;thisMovie(_movieName).playAudio();var length = thisMovie(_movieName).getAudioLength();//ms_audioLength = parseInt(length/1000)+2;//ms to m$.audioToEndBySec();}/*** 暫停播放*/ function karaokePlayPause(){if (_playerStatus == PLAYER_STATUS_PLAYING) {_playerStatus = PLAYER_STATUS_PAUSE;thisMovie(_movieName).pauseAudio();clearTimeout(audioPlay);} } /*** 繼續(xù)播放*/ function karaokePlayContinue(){if (_playerStatus == PLAYER_STATUS_PAUSE) {_playerStatus = PLAYER_STATUS_PLAYING;if (_isLoading) {//如果正在加載音頻，直接返回return;}thisMovie(_movieName).continuePlayAudio();$.audioToEndBySec();} } /*** 播放結(jié)束*/ function playToEnd(){_playerStatus = PLAYER_STATUS_STOP;$("#middleContent" + _currentIndex).find(".play_btn").removeClass("pause_btn"); }//根據(jù)題目序號(hào)獲取中間部分內(nèi)容 $.getMiddleContent = function(index){var content = $("#middleContent").clone();content.attr("id", "middleContent" + index);for (var i in _exerciseItemVoArray[index].exerciseSentenceVoList) {var sentence = _exerciseItemVoArray[index].exerciseSentenceVoList[i].sentence;var item = $('<tr><td class="answer_td"><div class="answer_container answer_container_left"><div class="question_answer question_answer_unselected font-18"><table style="height:100%;"><tr><td><div></div></td></tr></table></div></div></td></tr>');item.find("div.question_answer").attr("title", sentence);if (sentence.length > 45) {sentence = sentence.substring(0, 45) + "...";}item.find("div.question_answer").find("div").text(sentence);item.find("div.question_answer").attr("displayOrder", _exerciseItemVoArray[index].exerciseSentenceVoList[i].displayOrder);item.find("div.answer_container").attr("displayOrder", _exerciseItemVoArray[index].exerciseSentenceVoList[i].displayOrder);item.find("td.answer_td").css("padding", "5px 8px");item.find("td.answer_td").css("text-align", "center");content.find("table.answer_table:first").append(item);//容器var itemContainer = $('<tr><td><div class="answer_container answer_container_right"></div></td></tr>');itemContainer.find("td.answer_td").css("padding", "5px 8px");itemContainer.find("td.answer_td").css("text-align", "center");content.find("table.answer_table:last").append(itemContainer);}//設(shè)置播放錄音位置var playerBtnTop = 80 * _exerciseItemVoArray[index].exerciseSentenceVoList.length / 2 - 20;content.find(".play_btn").css("top", playerBtnTop);//點(diǎn)擊選中事件content.find("div.question_answer").click(function(){if (_haveFinished) {return;//已提交}if (!$(this).hasClass("question_answer_selected")) {var selected = content.find(".question_answer_selected");if (selected.length > 0) {var selectedContainer = selected.parent();var thisContainer = $(this).parent();selected.removeClass("question_answer_selected");selected.addClass("question_answer_unselected");}//設(shè)置選中狀態(tài)$(this).removeClass("question_answer_unselected");$(this).addClass("question_answer_selected");}});//移動(dòng)句子事件觸發(fā)content.find("div.answer_container_right").click(function(){if (_haveFinished) {return;//已提交}if ($(this).children("div.question_answer").length > 0) {return;}var selected = content.find("div.question_answer_selected");if (selected.length > 0) {$(this).append(selected);}var currentItemNumber = $(".exercise_item_number[index='" + index + "']");if (!currentItemNumber.hasClass("exercise_item_number_do")) {currentItemNumber.addClass("exercise_item_number_do");}});//移動(dòng)句子事件觸發(fā)(往左移動(dòng))content.find("div.answer_container_left").click(function(){if (_haveFinished) {return;//已提交}if ($(this).children("div.question_answer").length > 0) {return;}var selected = content.find("div.question_answer_selected");if (selected.length > 0) {$(this).append(selected);}var currentItemNumber = $(".exercise_item_number[index='" + index + "']");if (!currentItemNumber.hasClass("exercise_item_number_do")) {currentItemNumber.addClass("exercise_item_number_do");}});//播放音頻事件content.find(".play_btn").click(function(){var audioUrl = "audio/" + _exerciseItemVoArray[index].audioId + ".mp3";if ($(this).hasClass("pause_btn")) {//暫停播放$(this).attr("title", "繼續(xù)播放");karaokePlayPause();$(this).removeClass("pause_btn");} else {$(this).addClass("pause_btn");$(this).attr("title", "暫停");if (_playerStatus == PLAYER_STATUS_STOP) {_isLoading = true;thisMovie(_movieName).loadMp3Audio(audioUrl , "onAudioPrepared");} else {karaokePlayContinue();}}});return content; };//獲取用戶答案信息 $.getUserAnswer = function(index){var exerciseItemId = _exerciseItemVoArray[index].id;var answer = "";var answerArray = new Array();var isCorrect = true;var keyArray = _exerciseItemVoArray[index].answer.split(",");$("#middleContent" + index).find(".answer_container_right").each(function(aindex){var itemCorrect = true;var answerId = $(this).children("div.question_answer").attr("displayOrder");if (answerId!=keyArray[aindex]) {isCorrect = false;itemCorrect = false;}if(answerId==undefined){answerId = "";}answerArray.push({"answer":answerId,"itemCorrect":itemCorrect});});var currentItemNumber = $(".exercise_item_number[index='" + index + "']");if (!currentItemNumber.hasClass("exercise_item_number_do")) {answerArray = "";}return {"exerciseItemId" : exerciseItemId, "answer" : answerArray, "isCorrect" : isCorrect}; };//看答案事件 $.showStandardAnswer = function(index) {var rightAnswerArray = _exerciseItemVoArray[index].answer.split(",");;//IDs//answerEle = $("#middleContent" + index).find(".question_answer[answerId='" + rightAnswer + "']");$("#middleContent" + index).find(".answer_container_left").each(function(ind){var item = $("#middleContent" + index).find(".question_answer[displayOrder='" + rightAnswerArray[ind] + "']").clone();item.attr("displayOrder","-1").css("display","inline-block");item.removeClass("question_answer_selected").addClass("question_answer_unselected");$(this).find(".question_answer").hide();$(this).append(item);});$("#middleContent" + index).find(".show_answer").css("visibility","visible"); };//根據(jù)用戶之前的做題記錄還原做題答案 $.showUserRecentAnswer = function(index){var userAnswer = _exerciseItemVoArray[index].userAnswer;if(userAnswer!=""){var userAnswerObj = JSON.parse(userAnswer);for(var i=0;i<userAnswerObj.length;i++){if(userAnswerObj[i].answer != "" ){$("#middleContent" + index).find(".answer_container_left").eq(userAnswerObj[i].answer).find(".question_answer").click();$("#middleContent" + index).find(".answer_container_right").eq(i).click();}}}$.showAnswerResult(index); }//判斷對錯(cuò) $.showAnswerResult = function(index){var keyArray = _exerciseItemVoArray[index].answer.split(",");$("#middleContent" + index).find(".answer_container_right").each(function(aindex){var answerId = $(this).children("div.question_answer").attr("displayOrder");//定義父元素var answerEle = $(this);if(answerEle.find(".judge_img").length>0){return;}var top = answerEle.position().top;var left = answerEle.position().left;var width = answerEle.width();var height = answerEle.height();var judgeIcon = $('<img class="judge_img" src="<s:url value='/images/icon_correct.png'/>">');judgeIcon.css("top", top+(height-30)/2);judgeIcon.css("left", left + width + 15);if (answerId!=keyArray[aindex]) {judgeIcon.attr("src", "<s:url value='/images/icon_error.png'/>");}answerEle.append(judgeIcon);});};$().ready(function(){//題號(hào)點(diǎn)擊事件$(".exercise_item_number").click(function(){karaokePlayPause();playToEnd();}); }); //flash播放器加載完回調(diào) function onPlayerCompleted(){//與流媒體服務(wù)器建立連接var rtmpServerUrl = "${rtmpServerUrl}";thisMovie(_movieName).setRtmpServerURL(rtmpServerUrl); }function thisMovie(movieName) {if (navigator.appName.indexOf("Microsoft") != -1) {return window[movieName];}else {return document[movieName];} } </script><!-- 隱藏的ActionScript播放器類 --> <object style="width: 1px; height: 1px;position: absolute; top:0px; left:0px;" type="application/x-shockwave-flash" data="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" name="exerciseAudioPlayer" id="exerciseAudioPlayer" ><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" /><param name="quality" value="high" /><param name="scale" value="noScale" /><param name="wmode" value="transparent" /> </object><div style="display: none;"> <div id="middleContent"><div><p class="font-18 font-gray" style="font-weight: bold;">按你聽到得順序選中句子并點(diǎn)擊右邊空白框進(jìn)行排序。</p></div><div class="show_answer font-18 font-right">正確答案：</div><div style="width: 100%;overflow: hidden;"><table style="float:left; width: 44%;" class="answer_table"> <!-- 選項(xiàng) --></table><div style="float: left; width: 8%;text-align: center;"><input id="play_btn" type="button" class="play_btn" style="position: relative; " title="聽錄音"/></div><table style="float:left; width: 44%" class="answer_table"> <!-- 空白 --></table><div style="float: left; width: 4%;text-align: center;height:50px;"></div></div> </div> </div>
4、注意音頻的類型不是固定的

a、上傳的音頻一般是.mp3

b、錄音的音頻一般是.flv

audio表

==================================================================

[背誦記錄]帶暫停的音頻播放

recitationRecordDialoge.jsp源代碼

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/jquery.artDialog.source.js?skin=simple'/>"></script> <script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/plugins/iframeTools.source.js'/>"></script><style> .read_container{padding:20px; } .play_btn {width: 30px;height: 30px;cursor: pointer;border: none;background: url("/images/button_play.png") 0px 0px no-repeat; }.pause_btn {cursor: pointer;border: none;background: url("/images/button_pause.png") 0px 0px no-repeat; }</style><script type="text/javascript"> var PLAYER_STATUS_STOP = 0;//停止 var PLAYER_STATUS_PLAYING = 1;//正在播放 var PLAYER_STATUS_PAUSE = 2;//暫停 var _movieName = "recitationAudioPlayer";//flash播放器name var _playerStatus = PLAYER_STATUS_STOP;//播放狀態(tài) var _isLoading = false;//是否正在加載音頻 var _audioLength = 0;//音頻長度 var audioPlay = null;//計(jì)時(shí)$.audioToEndBySec = function(){audioPlay=setTimeout(function(){$.audioToEndBySec();},1000); if(_audioLength==0){//停止計(jì)時(shí)clearTimeout(audioPlay);playToEnd();}else{_audioLength--;} }; /*** MP3準(zhǔn)備完畢可以開始播放*/ function onAudioPrepared(){_isLoading = false;if (_playerStatus == PLAYER_STATUS_PAUSE) {//暫停狀態(tài)直接返回return;}_playerStatus = PLAYER_STATUS_PLAYING;thisMovie(_movieName).playAudio();var length = thisMovie(_movieName).getAudioLength();//ms_audioLength = parseInt(length/1000)+2;//ms to m$.audioToEndBySec();}/*** 暫停播放*/ function karaokePlayPause(){if (_playerStatus == PLAYER_STATUS_PLAYING) {_playerStatus = PLAYER_STATUS_PAUSE;thisMovie(_movieName).pauseAudio();clearTimeout(audioPlay);} } /*** 繼續(xù)播放*/ function karaokePlayContinue(){if (_playerStatus == PLAYER_STATUS_PAUSE) {_playerStatus = PLAYER_STATUS_PLAYING;if (_isLoading) {//如果正在加載音頻，直接返回return;}thisMovie(_movieName).continuePlayAudio();$.audioToEndBySec();} } /*** 播放結(jié)束*/ function playToEnd(){_playerStatus = PLAYER_STATUS_STOP;$("#play_btn").removeClass("pause_btn"); }$().ready(function(){//點(diǎn)擊播放$("#play_btn").click(function( evt ){evt.preventDefault();var audioId = $(this).attr("audioId");var homeworkRecordId =art.dialog.data('homeworkRecordId'); var audioUrl = "audio/" + audioId + ".flv";if ($(this).hasClass("pause_btn")) {//暫停播放$(this).attr("title", "繼續(xù)播放");karaokePlayPause();$(this).removeClass("pause_btn");} else {$(this).addClass("pause_btn");$(this).attr("title", "暫停");if (_playerStatus == PLAYER_STATUS_STOP) {_isLoading = true;thisMovie(_movieName).loadMp3Audio(audioUrl , "onAudioPrepared");} else {karaokePlayContinue();}}});});//flash播放器加載完回調(diào) function onPlayerCompleted(){//與流媒體服務(wù)器建立連接var rtmpServerUrl = "${rtmpServerUrl}";thisMovie(_movieName).setRtmpServerURL(rtmpServerUrl); }function thisMovie(movieName) {if (navigator.appName.indexOf("Microsoft") != -1) {return window[movieName];}else {return document[movieName];} }</script><!-- 隱藏的ActionScript播放器類 --> <object style="width: 1px; height: 1px;position: absolute; top:0px; left:0px;" type="application/x-shockwave-flash" data="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" name="recitationAudioPlayer" id="recitationAudioPlayer" ><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" /><param name="quality" value="high" /><param name="scale" value="noScale" /><param name="wmode" value="transparent" /> </object><div class="read_container"><div><span class="font-18" style="font-weight: bold;">背誦記錄</span></div><hr style="margin:0;" class="hr-long-orange"><div><s:if test="recitationVoList.size > 0"><table><s:iterator value="recitationVoList" var="recitationVo" status="st"><tr><td style="width: 10px;">${st.index+1}.</td><td>${recitationVo.blockTitle}</td><td><input id="play_btn" audioId="${recitationVo.audioId}" type="button" class="play_btn" title="繼續(xù)播放"></td></tr></s:iterator></table></s:if><s:else><span style="margin-top: 20px;display: block;">還沒有背誦記錄！</span></s:else></div> </div>

總結(jié)

以上是生活随笔為你收集整理的带暂停功能的音频播放代码参考的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。