HTML5怎么实现录音和播放功能_随笔

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 //采样数位 8, 16

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

//创建一个音频环境对象

audioContext = window.AudioContext || window.webkitAudioContext

var context = new audioContext()

//将声音输入这个对像

var audioInput = context.createMediaStreamSource(stream)

//设置音量节点

var volume = context.createGain()

audioInput.connect(volume)

//创建缓存，用来缓存声音

var bufferSize = 4096

// 创建声音的缓存节点，createScriptProcessor方法的

// 第二个和第三个参数指的是输入和输出都是双声道。

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

var audioData = {

size: 0 //录音文件长度

, buffer: [] //录音缓存

, inputSampleRate: context.sampleRate//输入采样率

, inputSampleBits: 16 //输入采样数位 8, 16

, outputSampleRate: config.sampleRate//输出采样率

, oututSampleBits: config.sampleBits //输出采样数位 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 = 0i <this.buffer.lengthi++) {

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 = 0i <str.lengthi++) {

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

}

// 资源交换文件标识符

writeString('RIFF')offset += 4

// 下个地址开始到文件尾总字节数,即文件大小-8

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

// WAV文件标志

writeString('WAVE')offset += 4

// 波形格式标志

writeString('fmt ')offset += 4

// 过滤字节,一般为 0x10 = 16

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

// 格式类别 (PCM形式采样数据)

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

// 通道数

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

// 采样率,每秒样本数,表示每个通道的播放速度

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

// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8

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

// 快数据调整数采样一次占用字节数单声道×每样本的数据位数/8

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

// 每样本数据位数

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

// 数据标识符

writeString('data')offset += 4

// 采样数据总数,即数据总大小-44

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

// 写入采样数据

if (sampleBits === 8) {

for (var i = 0i <bytes.lengthi++, 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 = 0i <bytes.lengthi++, 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

http://bbs.9ria.com/viewthread.php?tid=45402&highlight=%2Bhtml5

HTML5

从现在看来html5是一个温和的改进，它没有强制要求放弃现有的任何一种技术或方案。同时它也没有采用捆绑销售的方式（我们可以只采用html5的某一项标准，对于其他的仍旧可以用现有的方式来实现）。这些使得html5的推进将是一个长期进化的过程，这期间过时的东西会被抛弃，而新的方式将会浮出水面。各浏览器厂商正在加快对于html5的支持，对于有心于支配下一代互联网浏览器市场的厂商而言，多支持一种标准，是有益无害的。相信再过1-2年html5的那些新功能将会得到广泛的支持。从商业的角度看，html5也会是一个妥协的方案。它虽然会使你丧失一部分机会，但不会因此而成就你的竞争对手。敌视或抵制html5反而会错过更多的机会。在移动设备上html5具有更大的优势，由于移动设备的平台特性，设备商与软件商之间存在着一些竞争关系,这使得html5可以更快的进入市场，出于对移动网络的看好，html5也应该会有一个美好的未来

Flash和HTML5比较

1.普及率

任何的语言和产品成功与否取决于商业应用的普及率，FLASH的普及率我就不说了，大家都知道，除非你玩的是命令行或服务器否则基本上都有，这点比HTML5有很大的优势，当然你别和我说这个以后普及很快的，OK，那么我简单的问你，IE8出来多久了，IE8在中国的普及率又是多少你知道吗？你有知道有多少用户依然在使用IE6吗？我们从事互联网行业所以我们关注新版本，但是对于普通网民来说他们不在乎，更别提HTML5，即使IE9支持HTML5，你要等到何年何月？在回头看看FP的新版本，可以说在很短的时间内即可升级到最新版本，不管你是不是普通网民。还有在最近几年内难道在这期间ADOBE都是吃干饭的，FLASHPLAYER不会升级？所以这点毫无疑问的是FLASHPLAYER占有极大优势。

2.商业应用

这点就更不用说了，在与客户交谈的时候使用什么来实现，我想取决于客户的需求，你给客户说HTML5如何优秀，我想客户也会考虑到他自己能否使用，难道你会说你的电脑给我，我给你装一个最新的浏览器？如果对方是一个公司呢，难道你会说我去到你们公司上门服务，给你们每台计算机都安装最新的浏览器？

3.开发环境

快速快发和调试也是一个非常关键的因素，本身一个项目用FLASH一周可以实现，你用HTML5+JS要用2周何必呢？为什么说2周，因为你没有一个很好的调试工具，JS的调试可以说是最让人头疼的事情，这点你还别NB，起码我知道JS是出了名的难伺候！当然你可能会说JS很好调试啊，借助工具，我说的是其中的业务逻辑调试而非代码校正调试，FLEX我就不说了，用了的人都知道

4.编译型&解释型

我们都知道AS3最终会通过编译器编译成一个独立的文件，所以说AS3是属于编译型文件，而HTML5+JS呢？解释性语言，解释性语言的运行效率取决于解释器也就是浏览器，而编译型语言则不一样，通过这点我们就知道他们不是一个层次的东西，所以那些断言HTML5会给FLASH送终的人就继续你的YY之路吧！

5.网络支持

说道网络支持，JS支持XMLSOCKET或者SOCKET长连接吗？反正我到目前为止知道的是都是借助FLASH作为中转开发的，当然你别说通过一些极端的方法，如果JS官方不支持就是不支持，伪造的方法兼容性也不好。

6.FLASH是CPU hog?

说实话不是很理解乔布斯的话，任何语言的好于坏取决于开发者，如果我用C++写了一个病毒，那是不是意味着C++语言就是一个垃圾，很明显的道理，我用JS不断的写循环，浏览器一样也会挂掉，工具的好与坏取决于你怎么使用，而不是你只看到不好的一面然后就断定说这个是垃圾！

7.JS+HTML5的小内存

为什么说小内存，因为我不知道JS的内存可以存储二进制数据吗？可以读取本地IO到内存吗？很明显JS做不到，但是FP可以做到

8.视频PK

说道最关键的了，因为很多人认为HTML5的视频会打败FP，OK我就先比方所有的人上网都是为了看视频，我想问你HTML5支持H264吗？包括现在的FIREFOX似乎也只是H263编码的，而H263编码早已是FP的代谢产物，现在有个宽带基础的谁去看那些模糊不清的影片，在回头看看FP吧！H263/H264随你选，还有FP有很强大的FMS来做视频实时发布系统，你HTML5有什么，当然你别说msplayer，msplayer是微软的。或者谁NB的用HTML5做一个视频录制的程序给我看看。我们都想开开眼界

9.声音和麦克风

HTML5可以捕捉麦克风波形吗？HTML5支持原生的MP3播放吗？就算HTML5支持，比如做一个游戏，有些对声音播放要求是很及时的，FP是把声音加载到内存，你HTML5能做什么，无非加载到缓存，一个是从内存播放，一个是从缓存播放你看哪个快

还要说什么，乔布斯以及那些恨不得FLASH立即消失的朋友，只能对你们说声抱歉，FLASH再次让你们失望了！因为FLASH胜出：）

还有我一直在怀疑的一个问题，那就是乔布斯说的是手机版FLASHPLAYER而非PC版本的，否则他早就让leopard去掉对FP的支持了，不过我想到时候会少一大批人使用LEOPARD

再次声明：我说这些不是反对HTML5，我也支持HTML5，但是不支持HTML5是FLASH的终结这个说法，如果你一直认为我是在反驳HTML5我也没招，必定挑起口水战的是那些支持HTML5的朋友，好好的比什么啊！

出现html5: Video file not found意思是文件没有找到，也就是说视频文件不存在了，所以不能看。

建议题主尝试以下解决方法：

1，重新安装一下网页视频插件flash，或是升级该视频插件到最新版本试试，清除浏览器的垃圾文件和缓存试试，或是通过360安全卫士里面的人工服务修复一下这个异常。

2，视频播放器是指能播放以数字信号形式存储的视频的软件，也指具有播放视频功能的电子器件产品。

3，Multimedia PlayerKMPlayer软件介绍 KMPlayer以其强大的 *** 控功能在众多免费播放器中逐渐显示其开发实力.底层调用了WMP的内核DirectShow。

4，外部同时支持临时挂接Windows下的全部解码器。通过各种插件扩展KMP可以支持层出不穷的新格式。

5，强大的插件功能,直接从Winamp继承的插件功能，能够直接使用winamp的音频、输入、视觉效果插件而通过其独有的扩展能力，只要你喜欢，可以选择使用不同解码器对各种格式进行解码。

6，大多数视频播放器(除了少数波形文件外)，携带解码器以还原经过压缩媒体文件，视频播放器还要内置一整套转换频率以及缓冲的算法。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6119555.html

HTML5怎么实现录音和播放功能

发表评论

评论列表（0条）