html5 audio讀取檔案流播放音訊

阿新 • • 發佈：2019-01-16

最近要解決一個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做專案中，有寫播放的音訊需要收費，但是你又只能讓使用者試聽一部分的內容，那麼你就可以這樣實現。

html5 audio讀取檔案流播放音訊

最近要解決一個html5 播放音訊的問題，在前臺地址中不能直接寫伺服器中的音訊檔案地址。在java中使用的springmvc來解決問題，先配置好springmvc的環境，攔截*.mp3的請求，寫controller方法 package org.xxz.testaudio

audio讀取檔案流播放音訊

jsp階段：<audio controls="controls" controlsList="nodownload"><source src="${ctx }/phone/getAudio.ce?type=3&PATHID='+mp+'" type

從minio中讀取檔案流進行下載檔案

一、獲取Minio連線 public static String minioUrl; public static String minioUsername;

C# 學習：讀取檔案流，儲存到位元組中

最近在做檔案資料讀取的測試，C#的檔案讀取，儲存到位元組中，之前對這塊不熟悉，Mark： Stream expectedSteam = new FileStream(path, FileMode.O

讀取檔案流並寫入檔案流

Stream stream = File.OpenRead(Server.MapPath("0.jpg")); long len = stream.Length; byte[] buff = new byte[len]; s

JAVA讀取檔案流，設定瀏覽器下載或直接預覽

最近專案需要在瀏覽器中通過URL預覽圖片。但發現瀏覽器始終預設下載，而不是預覽。研究了一下，發現了問題： // 設定response的Header，注意這句，如果開啟，預設瀏覽器會進行下載操作，如果註釋掉，瀏覽器會預設預覽。 response.addHeader("Cont

檔案上傳:讀取檔案流的形式

傳統的上傳檔案方式是首先將檔案上傳到指定路徑，然後再從該路徑下解析檔案內容；這種方式實現比較繁瑣，並且暴漏了檔案上傳的路徑，造成了安全隱患。現在我們介紹的是另一種方式，直接讀取檔案流的方式，這種方式更加簡單安全，而且不佔用伺服器記憶體。一. jsp頁面 1.

H5 讀取檔案流

程式碼： <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <

Html5學習筆記四—播放音訊和視訊檔案

1，載入音訊檔案： Key word ：<audio src=”路徑” controls=”controls”> Src是音訊路徑，controls屬性用來提供播放，暫停，音量控制下面是一個簡單程式碼進行播放本地音訊 <!DOCTYPE HTML&

IOS音訊1:之採用四種方式播放音訊檔案（一）AudioToolbox AVFoundation OpenAL AUDIO QUEUE

在本卷你可以學到什麼？採用四種方法設計應用於各種場合的音訊播放器：基於AudioToolbox.framework框架。播放系統聲音檔案。基於AVFoundation.framework框架。播放多種音訊格式檔案。具有高階音訊播放器功能。如實時顯示進度、功率，控制音量

HTML5中使用audio元素播放音訊

1. 首先介紹的是JS程式碼如何檢測當前瀏覽器是否支援某種音訊格式。主要使用audio的canPlayType()方法： function checkAudio(){ var myAudio = document.createElement('audio'

直接在低版本IE6/7/8瀏覽器中使用HTML5的audio和video標籤播放視訊音訊的辦法

雖然我的mp4格式的視訊還是沒播放起來但覺得這些還是很有參考價值的支援低版本IE的html5播放器演示通常人們習慣用swf播放器來播放網路視訊音訊 HTML5給我們帶來了很多驚喜，其中新增加的audio和video標籤可以讓我們更方便的在網頁中

C# NAudio錄音和播放音訊檔案-實時繪製音訊波形圖（從音訊流資料獲取，而非裝置獲取）

　　NAudio的錄音和播放錄音都有對應的類，我在使用Wav格式進行錄音和播放錄音時使用的類時WaveIn和WaveOut，這兩個類是對功能的回撥和一些事件觸發。　　在WaveIn和WaveOut之外還有對音訊流讀寫使用的WaveFileWriter和WaveFileReader類，具體細節可檢視其原始碼進

關於html5 audio 標簽在ios系統上不能正常自動播放的解決辦法

mini function 必須 listener 解決 right rip 方式主動由於 iOS Safari 限制不允許 audio autoplay, 必須用戶主動交互(例如 click)後才能播放 audio, 因此我們通過一個用戶交互事件來主動 play 一下

HTML5 audio 如何實現播放多個MP3音頻

html tel 不能則無技術分享 class listener 內容 2-0 <audio>標簽是HTML5中的新標簽，定義聲音用於嵌入音頻內容，比如音樂或其他音頻流。用的比較多音頻格式是.mp3。 <audio>標簽常用屬性如下表屬性

html5 -audio-移動端如何自動播放

sta bsp 進行 tro roi 媒體 add 放音頁面最近在做一些活動類頁面或者類似於易企秀類型的輕應用經常遇到關於audio標簽的應用，對於audio相關的常用知識點以及一些相關的問題如下：　　 <audio id="audios" src="xxxx

HTML5 audio標籤使用js進行播放控制例項

<audio>標籤可以在HTML5瀏覽器中播放音訊檔案。 <audio>預設提供一個控制面板，但是有些時候我們只需要播放聲音，控制面板由我們自己來定義其顯示的狀態。這裡我們可以使用JS來進行控制，程式碼如下：程式碼如下: va

wave和pyaudio讀取wav語音檔案並播放

需要模組：wave , pyAudio 程式如下： import pyaudio import wave CHUNK = 1024 # 從目錄中讀取語音 wf = wave.open('./2.wav', 'rb') # read data data = wf.readfra

利用IO流一次性讀取檔案中的所有內容，利用IO流下載檔案

利用IO流一次性讀取檔案中的所有內容讀取檔案效率最快的方法就是一次全讀進來，使用readline()之類的方法，可能需要反覆訪問檔案，而且每次readline()都會呼叫編碼轉換，降低了速度，所以，在已知編碼的情況下，按位元組流方式先將檔案都讀入記憶體，再一次性編碼轉換是最快的方式

FileInputStream讀取位元組流。讀取檔案資料的兩種方式(寫的好)

總結： //1讀取檔案的資料到位元組流inputStream InputStream inputStream = new FileInputStream("D:\\demo.txt");//讀取檔案的資料到位元組流inputStream。

html5 audio讀取檔案流播放音訊

相關推薦