音频视频播放无法拖动快进

￡神魔★判官ぃ 2023-03-01 13:53 60阅读 0赞

在项目中使用 `<audio> <video>` 标签时出现了无法拖动进度条，无法快进的问题

解决方法如下

后端：

@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">×</span>
                    </button>
                    <h4 class="modal-title">消息提醒：</h4>
                </div>
                <div class="modal-body">
                    <audio src="" controls="controls" id="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>
            
        </div>
        
    </div>

audioListen(path){ 
    	//url = 接口+图片地址
    	var url = '${ctx}/admin/robot/audio/audioListen?path='+ path.replace(/\\/g,"/"));
    	$("#audio-listen-id").attr("src", url);
    	document.getElementById("audio-listen-id").load();
    }

[参考原文][Link 1]

这世界 盛大着 也美好着

[Link 1]: https://blog.csdn.net/gzc_870301/article/details/85623747?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase