正文
html5播放音频,html5音频自动播放
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用HTML5向网页中插入音频
工具/材料
Sublime Text
01
打开Sublime Text工具，准备好如下图所示的目录结构，目录里面包括要插入的音频文件和一个html文件。
02
打开HTML文件，新建一个空的HTML5文档结构，如下图所示，注意编码一定设置为UTF-8。
03
接下来在body标签中插入audio元素，audio元素里面通过source引入音频文件，如下图所示，注意文件的类型要写对。
04
运行编写好的页面程序，你会在网页中看到如下图所示的音频播放器，我们点击播放按钮就会自动播放音频。
05
当然有很多的老版本的浏览器并不支持audio元素，这个时候我们可以在audio里面添加一个提示，当浏览器不支持audio元素的时候就会显示这个提示。
06
如果想进入播放页面就立即自动播放音频内容，那么需要在audio中添加一个controls属性，如下图所示。
07
最后，我列举了一下当前主流浏览器对HTML5里面audio元素的支持情况，大家可以做一下参考。
相关问答
Q1: HTML5怎么实现录音和播放功能
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; //采样数位 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 = 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;
// 下个地址开始到文件尾总字节数,即文件大小-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 = 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
Q2: 为什么HTML5不需要任何浏览器插件就可以播放音视频？原理是什么？
因为浏览器直接支持啊，也就是说浏览器直接把你所谓的浏览器插件作为其内置的功能，就好比杂牌军直接被收编为正规军，浏览器都直接能播放音视频了，那还要什么插件啊？
Q3: HTML5中audio标签的使用
HTML5 中的新元素标签
src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：属性供添加播放、暂停和音量控件。
这些属性和video元素标签的属性很类似
常用的控制函数：
1.load()：加载音频、视频软件
2.play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
3.pause()：暂停出于播放状态的音频、视频文件
4.canPlayType(obj)：测试是否支持给定的Mini类型的文件
可脚本控制的属性值：
1.autoplay：自动播放已经加载的的媒体文件
2.loop为true：的时候则设定为自动播放
3.currentTime：以s为单位返回从开始播放到目前所花的时间
4.controls：显示或者隐藏用户控制界面
5.volume：音量值,从0.0至1.0之间
6.muted：设置是否静音
7.autobuffer：是否进行缓冲加载
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。
autoplay 设置或返回是否在就绪（加载完成）后随即播放音频。
buffered 返回表示音频已缓冲部分的 TimeRanges 对象。
controller 返回表示音频当前媒体控制器的 MediaController 对象。
controls 设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin 设置或返回音频的 CORS 设置。
currentSrc 返回当前音频的 URL。
currentTime 设置或返回音频中的当前播放位置（以秒计）。
defaultMuted 设置或返回音频默认是否静音。
defaultPlaybackRate 设置或返回音频的默认播放速度。
duration 返回音频的长度（以秒计）。
ended 返回音频的播放是否已结束。
error 返回表示音频错误状态的 MediaError 对象。
loop 设置或返回音频是否应在结束时再次播放。
mediaGroup 设置或返回音频所属媒介组合的名称。
muted 设置或返回是否关闭声音。
networkState 返回音频的当前网络状态。
paused 设置或返回音频是否暂停。
playbackRate 设置或返回音频播放的速度。
played 返回表示音频已播放部分的 TimeRanges 对象。
preload 设置或返回音频的 preload 属性的值。
readyState 返回音频当前的就绪状态。
seekable 返回表示音频可寻址部分的 TimeRanges 对象。
seeking 返回用户当前是否正在音频中进行查找。
src 设置或返回音频的 src 属性的值。
textTracks 返回表示可用文本轨道的 TextTrackList 对象。
volume 设置或返回音频的音量。
方法 描述
addTextTrack() 向音频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间。
getStartDate() 返回新的 Date 对象，表示当前时间线偏移量。
load() 重新加载音频元素。
play() 开始播放音频。
pause() 暂停当前播放的音频。
