js⾳乐播放器（audio属性及其使⽤⽅法）
视频解码器 H.264 Throra VP8
⾳频解码器 AAC MP3 Ogg
1.⾳频标准
audio 元素⽀持三种⾳频格式：ogg、mp3、wav
-IE9-Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg Vorbis-√√√-
MP3√--√√
Wav-√√-√
2.创建audio
<audio id="audio"src="music/Serenade.mp3"preload>
对不起，您的浏览器不⽀持HTML5⾳频播放。
</audio>
由上述表格可见，⾄少要两种⾳频格式才能覆盖所有浏览器，所以⼀般在写audio标签时候，会使⽤提供多种资源，浏览器会根据它对媒体类型或者编码器的⽀持进⾏选择，如下：
<!--常⽤-->
<audio controls>
type：指定⽂件类型
<source src=""type="audio/ogg">
<source src="horse.mp3"type="audio/mpeg">
</audio>
3.操作audio
⽅法描述
load()重新加载⾳频元素
play()开始播放⾳频
pause()暂停当前播放的⾳频
volume设置或返回⾳频的⾳量，取值范围（0——1）
<!DOCTYPE html>
<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 = ElementById("audio");
var volume = ElementById("volume");
var toggleBtn = ElementById("toggleBtn");
var title = ElementById("title");
var prevBtn = ElementById("prevBtn");
var nextBtn = ElementById("nextBtn");
//⾳乐路径列表
var list =new Array("music/Serenade.mp3","music/EndlessHorizon.mp3","music/⽉光下的云海.mp3"); //⾳乐标题列表
var titleList =new Array("⼩夜曲","⽆尽的地平线","⽉光下的云海");
//定义当前是第⼏⾸曲⽬
var i =0;
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"/>';
toggleBtn.innerHTML ='<img src="image/play.png" width="50" height="50"/>'; }
}
//切换上⼀⾸歌曲
if(i ==0){
i = list.length -1;
}else{
i--;
music.pause();
music.src = list[i];
title.innerHTML = titleList[i];
music.play();
}
html播放音乐代码}
//切换下⼀⾸歌曲
if(i == list.length -1)
i =0;
else
i++;
music.pause();
music.src = list[i];
title.innerHTML = titleList[i];
music.play();
}
//设置⾳量⼤⼩
music.volume = volume.value;
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。