Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js 音乐播放器（audio属性及其使用方法）
Blogger Information
Blog 8
fans 0
comment 0
visits 14491
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js 音乐播放器（audio属性及其使用方法）
熟悉的新风景
Original
1788 people have browsed it

视频解码器 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

  1.         <audio id="audio" src="music/Serenade.mp3" preload>
  2.             对不起，您的浏览器不支持HTML5音频播放。
  3.         </audio>

由上述表格可见，至少要两种音频格式才能覆盖所有浏览器，所以一般在写audio标签时候，会使用<source>提供多种资源，浏览器会根据它对媒体类型或者编码器的支持进行选择，如下：

  1.     <!--常用-->
  2.     <audio controls>
  3.         type:指定文件类型
  4.        <source src="horse.ogg" type="audio/ogg">
  5.        <source src="horse.mp3" type="audio/mpeg">
  6.     </audio>

在这里插入图片描述

<h3>3.操作audio

方法 描述
load() 重新加载音频元素
play() 开始播放音频
pause() 暂停当前播放的音频
volume 设置或返回音频的音量，取值范围（0——1） 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>简单音乐播放器</title>
  6.         <link rel="stylesheet" href="css/music.css">
  7.     </head>
  8.     <body>
  9.         <h3>简单音乐播放器</h3>
  10.         <hr />
  12.         <!--音乐文件的载入-->
  13.         <!-- preload 属性规定是否在页面加载后载入视频。 -->
  14.         <audio id="audio" src="music/Serenade.mp3" preload>
  15.             对不起，您的浏览器不支持HTML5音频播放。
  16.         </audio>
  18.         <!--仿CD样式圆形图片-->
  19.         <div id="CDimage">
  20.             <img src="image/sky.jpg" />
  21.         </div>
  23.         <!--音量调节进度条-->
  24.         <!-- step:买不，间隔，每次加减的多少0,0.1,0.2 -->
  25.         <div>
  26.             <input id="volume" type="range" min="0" max="1" step="0.1" />
  27.         </div>
  30.         <!--显示歌曲名称-->
  31.         <div>
  32.             当前正在播放: <span id="title">小夜曲</span>
  33.         </div>
  35.         <!--音乐播放器按钮-->
  36.         <div>
  37.             <button id="prevBtn"><img src="image/previous.png" width="50" height="50" /> </button>
  38.             <button id="toggleBtn"><img src="image/play.png" width="50" height="50" /></button>
  39.             <button id="nextBtn"><img src="image/next.png" width="50" height="50" /></button>
  40.         </div>
  41.         <script>
  42.             /* 获取音乐audio，音量volume，暂停播放toggleBtn，歌曲名称title */
  43.             var music = document.getElementById("audio");
  44.             var volume = document.getElementById("volume");
  45.             var toggleBtn = document.getElementById("toggleBtn");
  46.             var title = document.getElementById("title");
  47.             var prevBtn = document.getElementById("prevBtn");
  48.             var nextBtn = document.getElementById("nextBtn");
  50.             //音乐路径列表
  51.             var list = new Array("music/Serenade.mp3", "music/EndlessHorizon.mp3", "music/月光下的云海.mp3");
  53.             //音乐标题列表
  54.             var titleList = new Array("小夜曲", "无尽的地平线", "月光下的云海");
  56.             //定义当前是第几首曲目
  57.             var i = 0;
  59.             toggleBtn.onclick = function() {
  60.                 if (music.paused) {
  61.                     music.play();
  62.                     //播放音乐
  63.                     toggleBtn.innerHTML = '<img src="image/pause.png" width="50" height="50"/>';
  64.                 } else {
  65.                     music.pause();
  66.                     //暂停音乐
  67.                     toggleBtn.innerHTML = '<img src="image/play.png" width="50" height="50"/>';
  68.                 }
  69.             }
  70.             //切换上一首歌曲
  71.             prevBtn.onclick = function() {
  72.                 if (i == 0) {
  73.                     i = list.length - 1;
  74.                 } else {
  75.                     i--;
  76.                     music.pause();
  77.                     music.src = list[i];
  78.                     title.innerHTML = titleList[i];
  79.                     music.play();
  80.                 }
  82.             }
  83.             //切换下一首歌曲
  84.             nextBtn.onclick = function() {
  85.                 if (i == list.length - 1)
  86.                     i = 0;
  87.                 else
  88.                     i++;
  89.                 music.pause();
  90.                 music.src = list[i];
  91.                 title.innerHTML = titleList[i];
  92.                 music.play();
  93.             }
  95.             //设置音量大小
  96.             volume.onchange=function(){
  97.                  music.volume = volume.value;
  98.             }
  99.         </script>
  100.     </body>
  101. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post