场景
：如果只是前端用的话，估计不需要多讲，我的运用场景是“后台推送语音提示”
我的使用方式
:当接受的WebSocket的时候播放他
<audio src="https://www.cbdaojia.com//yuyin/语音1 .mp3" id="music2"></audio>
<script>
connect();
// 连接服务端
function connect() {
// 创建websocket
ws = new WebSocket("wss://++++");
// 当socket连接打开时，输入用户名
// ws.onopen = onopen;
// 当有消息时根据消息类型显示不同信息
ws.onmessage = onmessage;
ws.onclose = function() {
console.log("连接关闭，定时重连");
connect();
};
ws.onerror = function() {
console.log("出现错误");
};
}
// 服务端发来消息时
function onmessage(e)
{
var data = JSON.parse(e.data);
var music = document.getElementById("music2");
console.log(data);
switch(data['type']){
// 服务端ping客户端
case 7:
music.play();
console.log("新订单");
break;
case 'init':
var login_data = '{"type":"bind","fromid":"a0"}';
console.log("websocket握手成功，发送登录数据:"+login_data);
ws.send(login_data);
break;
}
}
</script>
下面是说明
`.
1、音频标准
audio 元素支持三种音频格式：ogg、mp3、wav
| - | IE9 | -Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | - | √ | √ | √ | - |
| MP3 | √ | - | - | √ | √ |
| Wav | - | √ | √ | - | √ |
2.创建audio
<audio id="audio" src="music/Serenade.mp3" preload>
对不起，您的浏览器不支持HTML5音频播放。
</audio>
由上述表格可见，至少要两种音频格式才能覆盖所有浏览器，所以一般在写audio标签时候，会使用提供多种资源，浏览器会根据它对媒体类型或者编码器的支持进行选择，如下：
<!--常用-->
<audio controls>
type:指定文件类型
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
| 属性 | 值 | 描述 |
|---|---|---|
| s’r’c | url | 音频的url |
| autoplay | autoplay | 音乐就绪后自动播放 |
| controls | controls | 浏览器应该提供播放插件 |
| loop | loop | 音乐循环播放 |
| reload | auto meta none | - 当页面加载后载入整个视频 - 当页面加载后只载入元数据 - 当页面加载后不载入视频 |
3.操作audio
| 方法 | 描述 |
|---|---|
| load() | 重新加载音频元素 |
| play() | 开始播放音频 |
| pause() | 暂停当前播放的音频 |
| volume | 设置或返回音频的音量，取值范围（0——1） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单音乐播放器</title>
<link rel="stylesheet" href="css/music.css">
</head>
<body>
<h3>简单音乐播放器</h3>
<hr />
<!--音乐文件的载入-->
<!-- preload 属性规定是否在页面加载后载入视频。 -->
<audio id="audio" src="music/Serenade.mp3" preload>
对不起，您的浏览器不支持HTML5音频播放。
</audio>
<!--仿CD样式圆形图片-->
<div id="CDimage">
<img src="image/sky.jpg" />
</div>
<!--音量调节进度条-->
<!-- step:买不，间隔，每次加减的多少0,0.1,0.2 -->
<div>
<input id="volume" type="range" min="0" max="1" step="0.1" />
</div>
<!--显示歌曲名称-->
<div>
当前正在播放: <span id="title">小夜曲</span>
</div>
<!--音乐播放器按钮-->
<div>
<button id="prevBtn"><img src="image/previous.png" width="50" height="50" /> </button>
<button id="toggleBtn"><img src="image/play.png" width="50" height="50" /></button>
<button id="nextBtn"><img src="image/next.png" width="50" height="50" /></button>
</div>
<script>
/* 获取音乐audio，音量volume，暂停播放toggleBtn，歌曲名称title */
var music = document.getElementById("audio");
var volume = document.getElementById("volume");
var toggleBtn = document.getElementById("toggleBtn");
var title = document.getElementById("title");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
//音乐路径列表
var list = new Array("music/Serenade.mp3", "music/EndlessHorizon.mp3", "music/月光下的云海.mp3");
//音乐标题列表
var titleList = new Array("小夜曲", "无尽的地平线", "月光下的云海");
//定义当前是第几首曲目
var i = 0;
toggleBtn.onclick = function() {
if (music.paused) {
music.play();
//播放音乐
toggleBtn.innerHTML = '<img src="image/pause.png" width="50" height="50"/>';
} else {
music.pause();
//暂停音乐
toggleBtn.innerHTML = '<img src="image/play.png" width="50" height="50"/>';
}
}
//切换上一首歌曲
prevBtn.onclick = function() {
if (i == 0) {
i = list.length - 1;
} else {
i--;
music.pause();
music.src = list[i];
title.innerHTML = titleList[i];
music.play();
}
}
//切换下一首歌曲
nextBtn.onclick = function() {
if (i == list.length - 1)
i = 0;
else
i++;
music.pause();
music.src = list[i];
title.innerHTML = titleList[i];
music.play();
}
//设置音量大小
volume.onchange=function(){
music.volume = volume.value;
}
</script>
</body>
</html>
