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"%><!-- 中間獨立的部分 --><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;//播放狀態 var _isLoading = false;//是否正在加載音頻 var _audioLength = 0;//音頻長度 var audioPlay = null;//計時$.audioToEndBySec = function(){audioPlay=setTimeout(function(){$.audioToEndBySec();},1000); if(_audioLength==0){//停止計時clearTimeout(audioPlay);playToEnd();}else{_audioLength--;} }; /*** MP3準備完畢可以開始播放*/ function onAudioPrepared(){_isLoading = false;if (_playerStatus == PLAYER_STATUS_PAUSE) {//暫停狀態直接返回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);} } /*** 繼續播放*/ function karaokePlayContinue(){if (_playerStatus == PLAYER_STATUS_PAUSE) {_playerStatus = PLAYER_STATUS_PLAYING;if (_isLoading) {//如果正在加載音頻，直接返回return;}thisMovie(_movieName).continuePlayAudio();$.audioToEndBySec();} } /*** 播放結束*/ function playToEnd(){_playerStatus = PLAYER_STATUS_STOP;$("#middleContent" + _currentIndex).find(".play_btn").removeClass("pause_btn"); }//根據題目序號獲取中間部分內容 $.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);}//設置播放錄音位置var playerBtnTop = 80 * _exerciseItemVoArray[index].exerciseSentenceVoList.length / 2 - 20;content.find(".play_btn").css("top", playerBtnTop);//點擊選中事件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");}//設置選中狀態$(this).removeClass("question_answer_unselected");$(this).addClass("question_answer_selected");}});//移動句子事件觸發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");}});//移動句子事件觸發(往左移動)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", "繼續播放");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"); };//根據用戶之前的做題記錄還原做題答案 $.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); }//判斷對錯 $.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(){//題號點擊事件$(".exercise_item_number").click(function(){karaokePlayPause();playToEnd();}); }); //flash播放器加載完回調 function onPlayerCompleted(){//與流媒體服務器建立連接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;">按你聽到得順序選中句子并點擊右邊空白框進行排序。</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"> <!-- 選項 --></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;//播放狀態 var _isLoading = false;//是否正在加載音頻 var _audioLength = 0;//音頻長度 var audioPlay = null;//計時$.audioToEndBySec = function(){audioPlay=setTimeout(function(){$.audioToEndBySec();},1000); if(_audioLength==0){//停止計時clearTimeout(audioPlay);playToEnd();}else{_audioLength--;} }; /*** MP3準備完畢可以開始播放*/ function onAudioPrepared(){_isLoading = false;if (_playerStatus == PLAYER_STATUS_PAUSE) {//暫停狀態直接返回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);} } /*** 繼續播放*/ function karaokePlayContinue(){if (_playerStatus == PLAYER_STATUS_PAUSE) {_playerStatus = PLAYER_STATUS_PLAYING;if (_isLoading) {//如果正在加載音頻，直接返回return;}thisMovie(_movieName).continuePlayAudio();$.audioToEndBySec();} } /*** 播放結束*/ function playToEnd(){_playerStatus = PLAYER_STATUS_STOP;$("#play_btn").removeClass("pause_btn"); }$().ready(function(){//點擊播放$("#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", "繼續播放");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播放器加載完回調 function onPlayerCompleted(){//與流媒體服務器建立連接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="繼續播放"></td></tr></s:iterator></table></s:if><s:else><span style="margin-top: 20px;display: block;">還沒有背誦記錄！</span></s:else></div> </div>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。