视频解码器 H.264 Throra VP8
音频解码器 AAC MP3 Ogg
<h3>1.音频标准
<font color="red">audio 元素支持三种音频格式：ogg、mp3、wav
| - | IE9 |-Firefox 3.5|Opera 10.5 |Chrome 3.0 |Safari 3.0|
|—|—|—|—|—|—|
|Ogg Vorbis | - |√| √ |√ |-|
| MP3 | √ |- |- | √ |√ |
| Wav | - |√ |√ | - |√ |
<h3>2.创建audio
<audio id="audio" src="music/Serenade.mp3" preload>对不起，您的浏览器不支持HTML5音频播放。</audio>
由上述表格可见，至少要两种音频格式才能覆盖所有浏览器，所以一般在写audio标签时候，会使用<source>提供多种资源，浏览器会根据它对媒体类型或者编码器的支持进行选择，如下：
<!--常用--><audio controls>type:指定文件类型<source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"></audio>
<h3>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;elsei++;music.pause();music.src = list[i];title.innerHTML = titleList[i];music.play();}//设置音量大小volume.onchange=function(){music.volume = volume.value;}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
