jPlayer播放后台返回的语音流

工作中需要在界面播放语音，网上找了许多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，各种视频

jPlayer播放后台返回的语音流相关推荐

红米note 4x播放视频切后台返回黑屏问题
问题使用mediaPlay+TextureView播放和显示视频,在红米note4x上视频播放时切后台返回时视频区域黑屏,提示音频可以继续播放,在其他手机上播放时没有这种问题. 代码 class V ...
java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变简单的就是在xml中判断下就行了 <view class='recharge_t ...
ajax和map返回数据类型,ajax请求后台返回map类型并如何展示
前台jsp或者ftl文件接收返回结果: 注意:value值用单引号,因为后台返回的结果是json字符串前台js接收返回结果: success: function(data){ var result ...
ajax返回实体类字符串,js使用ajax传值给后台,后台返回字符串处理方法
之前使用js获取后台生成的JSON字符串,然后给select填充值,这次需要重新获取一次. 这里的目标是,在一个input输入框里,输入一个用户名,判断是否为空,是否不存在,如果存在返回几个字段给前台 ...
vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式
背景:正好最近碰到了这种需求,记录下来,方便以后查看. 后端返回的文件流数据如下图所示: 后台返回数据.png 一.pdf的预览一开始的时候百度了很多方法,有建议用pdfJs插件的,有iframe嵌 ...
vue在js上处理后台返回的数组_vuejs 根据后台返回数组，渲染图片路径
后台返回的数组为: ["5", "1", "3", "2", "1",] 页面要实现对应数量的黄色星 ...
jQuery接收后台返回的数据
jQuery 可以直接接受,后台返回的数据 Controller方法需要转换为JSONString List<AssayItemClassExt> assayItemClassExtLi ...
iOS 后台返回json解析出现的null的解决办法
在后台返回值为Null为空时,我们代码没有判断时,程序就会崩溃.当时一直很疑惑是为啥,后来发现是数据问题,由于服务器的数据库中有些字段为空,然后以Json形式返回给客户端时就会出现这样的数据.当我们通 ...

jPlayer播放后台返回的语音流

jPlayer播放后台返回的语音流相关推荐

最新文章

热门文章