使用JavaScript脚本控制媒体播放

梦里梦外; 2022-05-12 00:40 137阅读 0赞

**一 介绍**

1、在HTML页面中获取<audio>和<video>元素播放音频和视频之外，很多时候我们还需要JavaScript来控制这些元素的播放。

2、在JavaScript中获取<audio>元素对应的对象为HTMLAudioElement的对象，<vidio>元素对应的对象为HTMLVideoElement对象。

3、HTMLAudioElement的对象和HTMLVideoElement对象支持方法如下：

paly():播放音频和视频。

pause()：暂停播放。

load()：重新装载音频和视频文件。

**二 代码**

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<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>

**三 运行结果**

![e4da803a-1430-3eb7-88ab-c9c7aa11cfad.png][]

[e4da803a-1430-3eb7-88ab-c9c7aa11cfad.png]: /images/20220512/34d134199dc04d2b9b85f4d7b94681dc.png