html5 audio读取文件流播放音频

最近要解决一个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做项目中,有写播放的音频需要收费,但是你又只能让用户试听一部分的内容,那么你就可以这样实现。

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Vue和Spring Boot都是目前非常行的前后端开发框架。实现音频播放可以结合这两个框架来完成。 首先,在Vue中,可以使用HTML5的`audio`标签来实现音频播放。可以通过设置`src`属性来指定音频文件的地址,通过`controls`属性来显示播放器的控制面板。另外,还可以使用Vue的事件绑定来监听音频播放状态,如`@play`、`@pause`等事件,以便在需要时执行相关的逻辑操作。在Vue的组件中,可以将`audio`标签封装成一个独立的组件,方便在不同的页面中进行复用。 接下来,在Spring Boot中,可以使用Java的编程语言来处理音频。具体实现方式通常是通过`java.io`包中的相关类来读取音频文件,并将其写入`HttpServletResponse`中返回给前端。可以使用Spring Boot的`@RequestMapping`注解来定义相应的请求路径,并在方法中读取音频文件并写入响应中。同时,可以通过设定响应头的`Content-Type`来指定返回的音频的类型,如`audio/mp3`、`audio/wav`等。此外,为了提高性能,可以考虑使用`@ResponseBody`注解,将音频写入`OutputStream`对象,而不是全部存储在内存中。 最后,在Vue中使用`axios`等网络请求库,发送请求去调用Spring Boot后端提供的音频接口。通过监听`audio`标签的相关事件,可以控制音频播放、暂停、停止等操作。同时,也可以通过Vue的状态管理机制,管理音频播放状态,如当前播放时间、总时长等信息。 综上所述,通过结合Vue和Spring Boot的特点和功能,我们可以很方便地实现音频播放功能。在Vue中通过`audio`标签和相关事件实现前端的控制,而在Spring Boot中,通过读取音频文件,并将音频返回给前端。这样,我们可以在前后端分离的开发模式下,实现音频播放功能。 ### 回答2: Vue和Spring Boot是两个独立的框架,分别用于前端开发和后端开发。在实现音频播放的功能时,可以分别使用Vue和Spring Boot来进行处理。 在Vue中,可以利用HTML5Audio对象来实现音频播放。首先,在Vue组件中引入Audio对象,并定义一个data属性来保存音频的URL: ``` data() { return { audioUrl: 'http://example.com/audio.mp3', audio: null } }, ``` 然后,在Vue组件的生命周期钩子中初始化音频对象,并在需要播放音频的地方调用播放方法: ``` mounted() { this.audio = new Audio(this.audioUrl); this.audio.play(); } ``` 需要注意的是,由于音频较大,可能需要使用式传输的方式获取音频数据,并将其作为URL传递给Audio对象。 在Spring Boot中,可以使用Java的Servlet技术来实现音频的传输。首先,创建一个Servlet类,用于处理音频的请求: ```java @WebServlet(urlPatterns = "/audio") public class AudioServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 从数据库或文件系统读取音频数据 InputStream audioStream = // 获取音频 // 设置Content-Type为音频类型 response.setContentType("audio/mp3"); // 将音频写入response中 OutputStream output = response.getOutputStream(); byte[] buffer = new byte[4096]; int bytesRead; while ((bytesRead = audioStream.read(buffer)) != -1) { output.write(buffer, 0, bytesRead); } audioStream.close(); } } ``` 然后,在Spring Boot应用的启动类中注册该Servlet: ```java @SpringBootApplication public class Application extends SpringBootServletInitializer { @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(Application.class); } public static void main(String[] args) { SpringApplication.run(Application.class, args); } @Bean public ServletRegistrationBean<AudioServlet> audioServletRegistration() { ServletRegistrationBean<AudioServlet> registration = new ServletRegistrationBean<>(new AudioServlet(), "/audio"); return registration; } } ``` 最后,在Vue组件中使用音频的URL来播放音频: ```vue <audio src="http://localhost:8080/audio" controls></audio> ``` 通过以上方式,就可以在Vue和Spring Boot中实现音频播放功能。当Vue组件加载时,会发起对音频的请求,Spring Boot会将音频数据传输至Vue组件中,从而实现音频播放。 ### 回答3: Vue和Spring Boot是两个独立的开发框架,分别用于前端和后端开发。在音频播放方面,通常需要在后端处理音频文件的上传和存储,并提供相应的接口供前端进行播放。下面我将分别介绍Vue和Spring Boot在音频播放方面的实现方法: 在Vue中,可以通过使用HTML5的<video>标签来实现音频播放。首先,在Vue组件中使用<video>标签来渲染播放器界面,然后通过Vue的数据绑定来控制音频播放状态。可以通过使用Vue的生命周期方法来实现音频的加载和播放操作,如在mounted生命周期方法中使用JavaScript来设置音频源,然后调用play()方法来播放音频。 在Spring Boot中,可以使用Spring MVC框架来处理音频的上传和播放。首先,编写一个Controller类,通过@GetMapping注解来映射一个URL路径,然后在该方法中使用ResponseEntity来返回音频文件的。在返回时,设置相应的Header信息,指定Content-Type为audio/mpeg等音频格式,然后将音频文件的写入到Response对象中,最后返回ResponseEntity对象。 综上所述,Vue和Spring Boot可以实现音频播放。在Vue中,我们通过HTML5的<video>标签和Vue的数据绑定来控制音频播放状态。在Spring Boot中,通过使用Spring MVC框架处理音频文件的上传和播放,返回音频的ResponseEntity对象。这样,我们可以通过Vue调用Spring Boot的接口来实现音频播放功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值