js 音乐播放器（audio属性及其使用方法）

视频解码器 H.264 Throra VP8
音频解码器 AAC MP3 Ogg

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>

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="data: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="data:image/previous.png" width="50" height="50" /> </button><button id="toggleBtn"><img src="data:image/play.png" width="50" height="50" /></button><button id="nextBtn"><img src="data: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="data:image/pause.png" width="50" height="50"/>';} else {music.pause();//暂停音乐toggleBtn.innerHTML = '<img src="data: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>

js 音乐播放器（audio属性及其使用方法）相关推荐

音乐播放器 audio
音乐播放器 audio 属性 src 音频的播放地址 controls 播放控件 autoplay 自动播放 loop 循环播放 muted 当设置修改属性后,音频输出被静音 APi play 播放 ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...
php项目网页音乐播放器插件,10个免费开源的JS音乐播放器插件
10个免费开源的JS音乐播放器插件三月 24, 2015 评论 (3) Sponsor 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里 ...
JavaScript 练手的小案例01：原生JS音乐播放器
温故而知新.今天重新将老师教过的东西拿出来翻新翻新,稳固加深知识理解程度. 首先,使用HTML搭好我们的框架结构.这一步为了提高我们代码的可读性,多写注释. <!DOCTYPE html> ...
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档）
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
aplayer.js音乐播放器插件使用
aplayer.js音乐播放器插件使用闲来无事,想把自己的博客园正酷炫点,平时也有收藏癖,见到好玩的有趣的酷炫的都收藏起来了,比较漂亮的博客园都保存了今天的目的:弄一个左下角的音乐播放器插件不会就 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
10个免费开源的JS音乐播放器插件
音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的,如果需要用到 ...

js 音乐播放器（audio属性及其使用方法）

1.音频标准

2.创建audio

3.操作audio

js 音乐播放器（audio属性及其使用方法）相关推荐

最新文章

热门文章