工作中需要在界面播放语音,网上找了许多js插件感觉都不是太好用,直到看到这个jPlayer,很强大也方便上手,内置了许多皮肤,就决定用它了。本文将实现从java后台返回流到前端,jPlayer播放。
java后台代码:
@RequestMapping("getVoice") public void voice(HttpServletRequest request , HttpServletResponse response) throws IOException { String filePath = "XXX.wav";//文件路径 response.setContentType("audio/x-wav|wav"); ServletOutputStream out; File file = new File(filePath); try { if(file.exists()) { FileInputStream inputStream = new FileInputStream(file); //通过response获取ServletOutputStream对象(out) out = response.getOutputStream(); int b = 0; byte[] buffer = new byte[512]; while (b != -1){ b = inputStream.read(buffer); //4.写到输出流(out)中 out.write(buffer,0,b); } inputStream.close(); out.close(); out.flush(); }else { log.info("文件不存在"); } } catch (IOException e) { e.printStackTrace(); } }
html代码:<html> <head> <title></title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="../../plugins/jPlayer/skin/pink.flag/jplayer.pink.flag.css"> <script src="../../libs/jquery.min.js"></script> <script src="../../plugins/jPlayer/jquery.jplayer.js"></script> </head> <body> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <div class="jp-volume-controls"> <button class="jp-mute" role="button" tabindex="0">mute</button> <button class="jp-volume-max" role="button" tabindex="0">max volume</button> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> <div class="jp-controls-holder"> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-stop" role="button" tabindex="0">stop</button> </div> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> </div> </div> </div> <div class="jp-details"> <div class="jp-title" aria-label="title"> </div> </div> <div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div> </body> </html>
js代码:
$(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function (event) { $(this).jPlayer("setMedia", { title: "Bubble", wav: "http://localhost:8081/getVoice" }); }, swfPath: "../../plugins/jPlayer/jplayer",//swf文件存放路径 supplied: "wav", wmode: "window", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); });
此处是播放wav,当然也支持mp3,各种视频