如何用HTML5向網(wǎng)頁(yè)中插入音頻

工具/材料

超過(guò)十余年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營(yíng)模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，微信小程序，微信開發(fā)，成都app軟件開發(fā)公司，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營(yíng)銷和我們一樣獲得訂單和生意！

Sublime Text

01

打開Sublime Text工具，準(zhǔn)備好如下圖所示的目錄結(jié)構(gòu)，目錄里面包括要插入的音頻文件和一個(gè)html文件。

02

打開HTML文件，新建一個(gè)空的HTML5文檔結(jié)構(gòu)，如下圖所示，注意編碼一定設(shè)置為UTF-8。

03

接下來(lái)在body標(biāo)簽中插入audio元素，audio元素里面通過(guò)source引入音頻文件，如下圖所示，注意文件的類型要寫對(duì)。

04

運(yùn)行編寫好的頁(yè)面程序，你會(huì)在網(wǎng)頁(yè)中看到如下圖所示的音頻播放器，我們點(diǎn)擊播放按鈕就會(huì)自動(dòng)播放音頻。

05

當(dāng)然有很多的老版本的瀏覽器并不支持audio元素，這個(gè)時(shí)候我們可以在audio里面添加一個(gè)提示，當(dāng)瀏覽器不支持audio元素的時(shí)候就會(huì)顯示這個(gè)提示。

06

如果想進(jìn)入播放頁(yè)面就立即自動(dòng)播放音頻內(nèi)容，那么需要在audio中添加一個(gè)controls屬性，如下圖所示。

07

最后，我列舉了一下當(dāng)前主流瀏覽器對(duì)HTML5里面audio元素的支持情況，大家可以做一下參考。

HTML5怎么實(shí)現(xiàn)錄音和播放功能

span style="white-space:pre" /spanaudio controls autoplay/audio

input type="button" value="開始錄音" onclick="startRecording()"/

input type="button" value="獲取錄音" onclick="obtainRecord()"/

input type="button" value="停止錄音" onclick="stopRecord()"/

input type="button" value="播放錄音" onclick="playRecord()"/

video id="video1" width="320px" height="240px" controls autoplay /video

video id="video2" width="320px" height="240px" controls autoplay /video

canvas id="canvas1" width="320" height="240"/canvas

input type="button" value="拍攝" onclick="scamera()"/

input type="button" value="播放視頻" onclick="playVideo()"/

js文件:

[javascript] view plain copy(function (window) {

//兼容

window.URL = window.URL || window.webkitURL;

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var HZRecorder = function (stream, config) {

config = config || {};

config.sampleBits = config.sampleBits || 8; //采樣數(shù)位 8, 16

config.sampleRate = config.sampleRate || (44100 / 6); //采樣率(1/6 44100)

//創(chuàng)建一個(gè)音頻環(huán)境對(duì)象

audioContext = window.AudioContext || window.webkitAudioContext;

var context = new audioContext();

//將聲音輸入這個(gè)對(duì)像

var audioInput = context.createMediaStreamSource(stream);

//設(shè)置音量節(jié)點(diǎn)

var volume = context.createGain();

audioInput.connect(volume);

//創(chuàng)建緩存，用來(lái)緩存聲音

var bufferSize = 4096;

// 創(chuàng)建聲音的緩存節(jié)點(diǎn)，createScriptProcessor方法的

// 第二個(gè)和第三個(gè)參數(shù)指的是輸入和輸出都是雙聲道。

var recorder = context.createScriptProcessor(bufferSize, 2, 2);

var audioData = {

size: 0 //錄音文件長(zhǎng)度

, buffer: [] //錄音緩存

, inputSampleRate: context.sampleRate //輸入采樣率

, inputSampleBits: 16 //輸入采樣數(shù)位 8, 16

, outputSampleRate: config.sampleRate //輸出采樣率

, oututSampleBits: config.sampleBits //輸出采樣數(shù)位 8, 16

, input: function (data) {

this.buffer.push(new Float32Array(data));

this.size += data.length;

}

, compress: function () { //合并壓縮

//合并

var data = new Float32Array(this.size);

var offset = 0;

for (var i = 0; i this.buffer.length; i++) {

data.set(this.buffer[i], offset);

offset += this.buffer[i].length;

}

//壓縮

var compression = parseInt(this.inputSampleRate / this.outputSampleRate);

var length = data.length / compression;

var result = new Float32Array(length);

var index = 0, j = 0;

while (index length) {

result[index] = data[j];

j += compression;

index++;

}

return result;

}

, encodeWAV: function () {

var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);

var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);

var bytes = this.compress();

var dataLength = bytes.length * (sampleBits / 8);

var buffer = new ArrayBuffer(44 + dataLength);

var data = new DataView(buffer);

var channelCount = 1;//單聲道

var offset = 0;

var writeString = function (str) {

for (var i = 0; i str.length; i++) {

data.setUint8(offset + i, str.charCodeAt(i));

}

};

// 資源交換文件標(biāo)識(shí)符

writeString('RIFF'); offset += 4;

// 下個(gè)地址開始到文件尾總字節(jié)數(shù),即文件大小-8

data.setUint32(offset, 36 + dataLength, true); offset += 4;

// WAV文件標(biāo)志

writeString('WAVE'); offset += 4;

// 波形格式標(biāo)志

writeString('fmt '); offset += 4;

// 過(guò)濾字節(jié),一般為 0x10 = 16

data.setUint32(offset, 16, true); offset += 4;

// 格式類別 (PCM形式采樣數(shù)據(jù))

data.setUint16(offset, 1, true); offset += 2;

// 通道數(shù)

data.setUint16(offset, channelCount, true); offset += 2;

// 采樣率,每秒樣本數(shù),表示每個(gè)通道的播放速度

data.setUint32(offset, sampleRate, true); offset += 4;

// 波形數(shù)據(jù)傳輸率 (每秒平均字節(jié)數(shù)) 單聲道×每秒數(shù)據(jù)位數(shù)×每樣本數(shù)據(jù)位/8

data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;

// 快數(shù)據(jù)調(diào)整數(shù) 采樣一次占用字節(jié)數(shù) 單聲道×每樣本的數(shù)據(jù)位數(shù)/8

data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;

// 每樣本數(shù)據(jù)位數(shù)

data.setUint16(offset, sampleBits, true); offset += 2;

// 數(shù)據(jù)標(biāo)識(shí)符

writeString('data'); offset += 4;

// 采樣數(shù)據(jù)總數(shù),即數(shù)據(jù)總大小-44

data.setUint32(offset, dataLength, true); offset += 4;

// 寫入采樣數(shù)據(jù)

if (sampleBits === 8) {

for (var i = 0; i bytes.length; i++, offset++) {

var s = Math.max(-1, Math.min(1, bytes[i]));

var val = s 0 ? s * 0x8000 : s * 0x7FFF;

val = parseInt(255 / (65535 / (val + 32768)));

data.setInt8(offset, val, true);

}

} else {

for (var i = 0; i bytes.length; i++, offset += 2) {

var s = Math.max(-1, Math.min(1, bytes[i]));

data.setInt16(offset, s 0 ? s * 0x8000 : s * 0x7FFF, true);

}

}

return new Blob([data], { type: 'audio/wav' });

}

};

//開始錄音

this.start = function () {

audioInput.connect(recorder);

recorder.connect(context.destination);

};

//停止

this.stop = function () {

recorder.disconnect();

};

//獲取音頻文件

this.getBlob = function () {

this.stop();

return audioData.encodeWAV();

};

//回放

this.play = function (audio) {

audio.src = window.URL.createObjectURL(this.getBlob());

};

//上傳

this.upload = function (url, callback) {

var fd = new FormData();

fd.append('audioData', this.getBlob());

var xhr = new XMLHttpRequest();

if (callback) {

xhr.upload.addEventListener('progress', function (e) {

callback('uploading', e);

}, false);

xhr.addEventListener('load', function (e) {

callback('ok', e);

}, false);

xhr.addEventListener('error', function (e) {

callback('error', e);

}, false);

xhr.addEventListener('abort', function (e) {

callback('cancel', e);

}, false);

}

xhr.open('POST', url);

xhr.send(fd);

};

//音頻采集

recorder.onaudioprocess = function (e) {

audioData.input(e.inputBuffer.getChannelData(0));

//record(e.inputBuffer.getChannelData(0));

};

};

//拋出異常

HZRecorder.throwError = function (message) {

throw new function () { this.toString = function () { return message; };};

};

//是否支持錄音

HZRecorder.canRecording = (navigator.getUserMedia != null);

//獲取錄音機(jī)

HZRecorder.get = function (callback, config) {

if (callback) {

if (navigator.getUserMedia) {

navigator.getUserMedia(

{ audio: true } //只啟用音頻

, function (stream) {

var rec = new HZRecorder(stream, config);

callback(rec);

}

, function (error) {

switch (error.code || error.name) {

case 'PERMISSION_DENIED':

case 'PermissionDeniedError':

HZRecorder.throwError('用戶拒絕提供信息。');

break;

case 'NOT_SU

為什么HTML5不需要任何瀏覽器插件就可以播放音視頻？原理是什么？

因?yàn)闉g覽器直接支持啊，也就是說(shuō)瀏覽器直接把你所謂的瀏覽器插件作為其內(nèi)置的功能，就好比雜牌軍直接被收編為正規(guī)軍，瀏覽器都直接能播放音視頻了，那還要什么插件啊？

HTML5中audio標(biāo)簽的使用

HTML5 中的新元素標(biāo)簽

src：音頻文件路徑。

autobuffer：設(shè)置是否在頁(yè)面加載時(shí)自動(dòng)緩沖音頻。

autoplay：設(shè)置音頻是否自動(dòng)播放。

loop：設(shè)置音頻是否要循環(huán)播放。

controls：屬性供添加播放、暫停和音量控件。

這些屬性和video元素標(biāo)簽的屬性很類似

常用的控制函數(shù)：

1.load()：加載音頻、視頻軟件

2.play()：加載并播放音頻、視頻文件或重新播放暫停的的音頻、視頻

3.pause()：暫停出于播放狀態(tài)的音頻、視頻文件

4.canPlayType(obj)：測(cè)試是否支持給定的Mini類型的文件

可腳本控制的屬性值：

1.autoplay：自動(dòng)播放已經(jīng)加載的的媒體文件

2.loop為true：的時(shí)候則設(shè)定為自動(dòng)播放

3.currentTime：以s為單位返回從開始播放到目前所花的時(shí)間

4.controls：顯示或者隱藏用戶控制界面

5.volume：音量值,從0.0至1.0之間

6.muted：設(shè)置是否靜音

7.autobuffer：是否進(jìn)行緩沖加載

audioTracks 返回表示可用音頻軌道的 AudioTrackList 對(duì)象。

autoplay 設(shè)置或返回是否在就緒（加載完成）后隨即播放音頻。

buffered 返回表示音頻已緩沖部分的 TimeRanges 對(duì)象。

controller 返回表示音頻當(dāng)前媒體控制器的 MediaController 對(duì)象。

controls 設(shè)置或返回音頻是否應(yīng)該顯示控件（比如播放/暫停等）。

crossOrigin 設(shè)置或返回音頻的 CORS 設(shè)置。

currentSrc 返回當(dāng)前音頻的 URL。

currentTime 設(shè)置或返回音頻中的當(dāng)前播放位置（以秒計(jì)）。

defaultMuted 設(shè)置或返回音頻默認(rèn)是否靜音。

defaultPlaybackRate 設(shè)置或返回音頻的默認(rèn)播放速度。

duration 返回音頻的長(zhǎng)度（以秒計(jì)）。

ended 返回音頻的播放是否已結(jié)束。

error 返回表示音頻錯(cuò)誤狀態(tài)的 MediaError 對(duì)象。

loop 設(shè)置或返回音頻是否應(yīng)在結(jié)束時(shí)再次播放。

mediaGroup 設(shè)置或返回音頻所屬媒介組合的名稱。

muted 設(shè)置或返回是否關(guān)閉聲音。

networkState 返回音頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)。

paused 設(shè)置或返回音頻是否暫停。

playbackRate 設(shè)置或返回音頻播放的速度。

played 返回表示音頻已播放部分的 TimeRanges 對(duì)象。

preload 設(shè)置或返回音頻的 preload 屬性的值。

readyState 返回音頻當(dāng)前的就緒狀態(tài)。

seekable 返回表示音頻可尋址部分的 TimeRanges 對(duì)象。

seeking 返回用戶當(dāng)前是否正在音頻中進(jìn)行查找。

src 設(shè)置或返回音頻的 src 屬性的值。

textTracks 返回表示可用文本軌道的 TextTrackList 對(duì)象。

volume 設(shè)置或返回音頻的音量。

方法 描述

addTextTrack() 向音頻添加新的文本軌道。

canPlayType() 檢查瀏覽器是否能夠播放指定的音頻類型。

fastSeek() 在音頻播放器中指定播放時(shí)間。

getStartDate() 返回新的 Date 對(duì)象，表示當(dāng)前時(shí)間線偏移量。

load() 重新加載音頻元素。

play() 開始播放音頻。

pause() 暫停當(dāng)前播放的音頻。

網(wǎng)站名稱：html5播放音頻,html5音頻自動(dòng)播放
URL地址：http://chinadenli.net/article10/dsdeodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)