html5 audio读取文件流播放音频

controller：读取流

@RequestMapping(value = "audioListen")
    @ResponseBody
	public String getAudio(HttpServletRequest request, HttpServletResponse response,@RequestParam String path) throws Exception{
		 
		 if (path!=null) {
			 String range = request.getHeader("Range");  
             String[] rs = range.split("\\=");  
            range = rs[1].split("\\-")[0]; 
			 File file = new File(path);  
			 if(!file.exists()) throw new RuntimeException("音频文件不存在 --> 404");
			 OutputStream os = response.getOutputStream();  
			 FileInputStream fis = new FileInputStream(file);  
			 long length = file.length();  
			 // 播放进度  
			 int count = 0;  
			 // 播放百分比  
			 int percent = (int)(length * 1);  
			 int irange = Integer.parseInt(range);  
            length = length - irange;  
 
           response.addHeader("Accept-Ranges", "bytes");  
           response.addHeader("Content-Length", length + "");  
           response.addHeader("Content-Range", "bytes " + range + "-" + length + "/" + length);  
           response.addHeader("Content-Type", "audio/mpeg;charset=UTF-8");   
			
			 int len = 0;  
			 byte[] b = new byte[1024];  
			 while ((len = fis.read(b)) != -1) {  
			     os.write(b, 0, len);  
			     count += len;  
			     if(count >= percent){  
			         break;  
			     }  
			 }  
			 fis.close();  
			 os.close();  
		 }
		return null;
	}

 

页面：

<div class="modal fade" id="robot-audio-listen-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">消息提醒：</h4>
            </div>
            <div class="modal-body">
                <audio src="" controls="controls" id="robot-audio-listen-id">
				您的浏览器不支持 audio 标签。
				</audio>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

 

function audioListen(path){
	$("#robot-audio-listen-id").attr("src","${ctx}/admin/robot/audio/audioListen?path="+path.replace(/\\/g,"/"));
	document.getElementById("robot-audio-listen-id").load();
}

转自：https://blog.csdn.net/xxzblog/article/details/41312315