标签：顺序 index head 音频 对象 ide set type layer
在JavaScript脚本中获取<audio.../>元素对应的对象为HTMLAudioElement对象，<video.../>元素对应的对象为HTMLVideoElement对象。
HTMLAudioElement对象和HTMLVideoElement对象支持的方法有如下几个：
下面页面代码实现了一个简单的音乐播放器，支持两种播放模式：随机播放和顺序播放。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 音乐播放器 </title> <script type="text/javascript"> // 定义能播放的所有音乐 var musics = [ "demo1.ogg", "bomb.ogg", "arrow.ogg", "love.ogg", "song.ogg", ]; // 定义正在播放的音频文件的索引 var index = 0; // 记录顺序播放、随机播放的变量 var playType; var player; window.onload = function() { var typeSel = document.getElementById("typeSel"); // 当用户更改下拉菜单的选项时，改变播放方式 typeSel.onchange = function() { window.playType = typeSel.value; } player = document.getElementById("player"); // 页面加载时播放第一个音频文件 player.src = musics[index]; player.onended = function() { if(playType == "random") { // 计算一个随机数 index = Math.floor(Math.random() * musics.length); // 随机播放一个音频文件 player.src = musics[index]; } else { // 播放下一个音频文件 player.src = musics[++index % musics.length]; } // 播放 player.play(); } } </script> </head> <body> <h2> 音乐播放器 </h2> <select id="typeSel" style="width:160px"> <option value="sequence">顺序播放</option> <option value="random">随机播放</option> </select><br/> <audio id="player" controls> 您的浏览器不支持audio元素 </audio> </body> </html>
页面效果如下：
使用JavaScript脚本控制媒体播放（顺序播放和随机播放）
标签：顺序 index head 音频 对象 ide set type layer
原文地址：https://www.cnblogs.com/web12/p/9905544.html
