html5 audio读取文件流播放音频
2014-11-20 14:21
417 查看
最近要解决一个html5 播放音频的问题,在前台地址中不能直接写服务器中的音频文件地址。
在java中使用的springmvc来解决问题,先配置好springmvc的环境,拦截*.mp3的请求,写controller方法
页面编写:
这里只能播放视频文件的40%的内容。
在这里可以做到一个控制,比如你在用html5做项目中,有写播放的音频需要收费,但是你又只能让用户试听一部分的内容,那么你就可以这样实现。
在java中使用的springmvc来解决问题,先配置好springmvc的环境,拦截*.mp3的请求,写controller方法
package org.xxz.testaudio; import java.io.File; import java.io.FileInputStream; import java.io.OutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; @Controller @RequestMapping("/player") public class PlayerController { @RequestMapping(value = "/{id}") public ModelAndView getAudio(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) throws Exception { System.out.println("id: " + id); String range = request.getHeader("Range"); String[] rs = range.split("\\="); range = rs[1].split("\\-")[0]; String path = request.getServletContext().getRealPath("/"); File file = new File(path + "/WEB-INF/mp3/" + id + ".mp3"); if(!file.exists()) throw new RuntimeException("音频文件不存在 --> 404"); OutputStream os = response.getOutputStream(); FileInputStream fis = new FileInputStream(file); long length = file.length(); System.out.println("file length : " + length); // 播放进度 int count = 0; // 播放百分比 int percent = (int)(length * 0.4); 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; } } System.out.println("count: " + count + ", percent: " + percent); fis.close(); os.close(); return null; } }
页面编写:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>audio</title> </head> <body> <audio src="${pageContext.request.contextPath}/player/zj-ywaqldbry.mp3" controls="controls"> Your browser does not support the audio tag. </audio> </body> </html>
这里只能播放视频文件的40%的内容。
在这里可以做到一个控制,比如你在用html5做项目中,有写播放的音频需要收费,但是你又只能让用户试听一部分的内容,那么你就可以这样实现。
相关文章推荐
- audio 元素能够播放声音文件或者音频流-html5播放音频
- CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
- HTML5 API---使用WebAudio API播放音频文件
- IOS音频2:之采用四种方式播放音频文件(二)AudioToolbox AVFoundation OpenAL AUDIO QUEUE(2014-10-17 16:07)
- Html5学习笔记四—播放音频和视频文件
- iphone利用AudioQueue播放音频文件(mp3,aac,caf,wav等)
- 利用AudioQueue播放音频文件(mp3,aac,caf,wav等)
- 【Android】AudioTrack播放caf音频文件
- IOS音频3:之采用四种方式播放音频文件(三)AudioToolbox AVFoundation OpenAL AUDIO QUEUE
- html5 audio音频播放全解析
- iphone利用AudioQueue播放音频文件(mp3,aac,caf,wav等)
- iphone利用AudioQueue播放音频文件(mp3,aac,caf,wav等)
- 利用html5标签audio在不同客户端下适配播放音频
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- Play audio Files (播放音频文件)
- iphone利用AudioQueue播放音频文件(mp3,aac,caf,wav等)
- iphone利用AudioQueue播放音频文件(mp3,aac,caf,wav等)
- HTML5 Video/Audio播放本地文件示例介绍
- IOS音频4:之采用四种方式播放音频文件(四)AudioToolbox AVFoundation OpenAL AUDIO QUEUE