HTML5 實現(xiàn)錄音，然后上傳到服務(wù)器，有現(xiàn)成方案嗎

可以去找插件做。

創(chuàng)新互聯(lián)專注于桂東企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城網(wǎng)站建設(shè)。桂東網(wǎng)站建設(shè)公司,為桂東等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

希望我的回答可以幫到你，有什么不懂可以追問。

HTML5怎么實現(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)建一個音頻環(huán)境對象

audioContext = window.AudioContext || window.webkitAudioContext;

var context = new audioContext();

//將聲音輸入這個對像

var audioInput = context.createMediaStreamSource(stream);

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

var volume = context.createGain();

audioInput.connect(volume);

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

var bufferSize = 4096;

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

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

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

var audioData = {

size: 0 //錄音文件長度

, 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));

}

};

// 資源交換文件標識符

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

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

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

// WAV文件標志

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

// 波形格式標志

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

// 過濾字節(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ù),表示每個通道的播放速度

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ù)標識符

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);

//獲取錄音機

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實現(xiàn)錄音功能

不過我的音頻全部上傳到了又拍云。是通過html5上傳的。可以用 html5 的 Audio Api 獲取音頻源（還能獲取攝像頭）

html5調(diào)取麥克風錄音后上傳至服務(wù)器 就是想做一個手機網(wǎng)站，調(diào)取手機的麥克風功能錄音，然后傳到

這個調(diào)取功能要通過安卓編程語言或ios編程語言調(diào)取 單單html5是實現(xiàn)不了的

html實現(xiàn)錄音和播放功能

1、首先新建一個HTML文檔，如圖所示。

2、然后在body標簽里輸入video標簽。

3、接著在video標簽內(nèi)輸入controls="controls"，如圖所示。

4、然后在video標簽里輸入source，接著在source內(nèi)輸入src="medias/volcano.ogg"，如圖所示。

5、然后在后面輸入type="video/ogg"如圖所示，然后在定義一個source標簽。

6、在標簽內(nèi)輸入src="medias/volcano.mp4" type="video/mp4"如圖所示。

7、最后按f12預(yù)覽就可以看到視頻播放器了。