博主信息
熟悉的新风景
博文
8
粉丝
0
评论
0
访问量
508
积分:0
P豆:18

js 音乐播放器(audio属性及其使用方法)

2020年05月22日 10:39:29阅读数:73博客 / 熟悉的新风景 / html

视频解码器 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 />
  11. <!--音乐文件的载入-->
  12. <!-- preload 属性规定是否在页面加载后载入视频。 -->
  13. <audio id="audio" src="music/Serenade.mp3" preload>
  14. 对不起,您的浏览器不支持HTML5音频播放。
  15. </audio>
  16. <!--仿CD样式圆形图片-->
  17. <div id="CDimage">
  18. <img src="image/sky.jpg" />
  19. </div>
  20. <!--音量调节进度条-->
  21. <!-- step:买不,间隔,每次加减的多少0,0.1,0.2 -->
  22. <div>
  23. <input id="volume" type="range" min="0" max="1" step="0.1" />
  24. </div>
  25. <!--显示歌曲名称-->
  26. <div>
  27. 当前正在播放: <span id="title">小夜曲</span>
  28. </div>
  29. <!--音乐播放器按钮-->
  30. <div>
  31. <button id="prevBtn"><img src="image/previous.png" width="50" height="50" /> </button>
  32. <button id="toggleBtn"><img src="image/play.png" width="50" height="50" /></button>
  33. <button id="nextBtn"><img src="image/next.png" width="50" height="50" /></button>
  34. </div>
  35. <script>
  36. /* 获取音乐audio,音量volume,暂停播放toggleBtn,歌曲名称title */
  37. var music = document.getElementById("audio");
  38. var volume = document.getElementById("volume");
  39. var toggleBtn = document.getElementById("toggleBtn");
  40. var title = document.getElementById("title");
  41. var prevBtn = document.getElementById("prevBtn");
  42. var nextBtn = document.getElementById("nextBtn");
  43. //音乐路径列表
  44. var list = new Array("music/Serenade.mp3", "music/EndlessHorizon.mp3", "music/月光下的云海.mp3");
  45. //音乐标题列表
  46. var titleList = new Array("小夜曲", "无尽的地平线", "月光下的云海");
  47. //定义当前是第几首曲目
  48. var i = 0;
  49. toggleBtn.onclick = function() {
  50. if (music.paused) {
  51. music.play();
  52. //播放音乐
  53. toggleBtn.innerHTML = '<img src="image/pause.png" width="50" height="50"/>';
  54. } else {
  55. music.pause();
  56. //暂停音乐
  57. toggleBtn.innerHTML = '<img src="image/play.png" width="50" height="50"/>';
  58. }
  59. }
  60. //切换上一首歌曲
  61. prevBtn.onclick = function() {
  62. if (i == 0) {
  63. i = list.length - 1;
  64. } else {
  65. i--;
  66. music.pause();
  67. music.src = list[i];
  68. title.innerHTML = titleList[i];
  69. music.play();
  70. }
  71. }
  72. //切换下一首歌曲
  73. nextBtn.onclick = function() {
  74. if (i == list.length - 1)
  75. i = 0;
  76. else
  77. i++;
  78. music.pause();
  79. music.src = list[i];
  80. title.innerHTML = titleList[i];
  81. music.play();
  82. }
  83. //设置音量大小
  84. volume.onchange=function(){
  85. music.volume = volume.value;
  86. }
  87. </script>
  88. </body>
  89. </html>

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!