登录  /  注册
博主信息
博文 8
粉丝 0
评论 0
访问量 13882
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
js 音乐播放器(audio属性及其使用方法)
熟悉的新风景
原创
1723人浏览过

视频解码器 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>
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学