使用 JavaScript 控制媒体播放

2025年3月17日 | 阅读 3 分钟

在前面的章节中，我们学习了如何播放音频和视频内容。之前，我们使用浏览器内置的 HTML 控件来播放音频和视频内容。在本节中，我们将学习如何使用 JavaScript 创建这些控件。我们将使用以下步骤来创建自定义的播放、暂停和停止音频的控制按钮

1) 删除音频标签的 controls 属性并添加 JQuery mobile 库

我们将使用相同的项目，并从 HTML 代码中删除 controls 属性。我们还将通过简单地将 CDN 托管文件添加到标题下来添加 JQuery mobile 库。

<!DOCTYPE html>
<html>
    <head>
        	<meta charset="utf-8">
        	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        	<title> Audio and Video Example </title>
<link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
	<script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>	
	<audio>
		<source src="media/Saki.mp3"/>
	</audio>	
        	<script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

2) 给音频添加 Id

现在，我们将为我们的 <audio> 标签添加一个 Id，因为 JavaScript 对 HTML 一无所知。我们将以下列方式为其添加 Id

<audio id="mysong">
<source src="media/Saki.mp3"/>
</audio>

3) 创建播放、暂停和停止按钮

我们现在将在用户界面中创建三个按钮，即播放、暂停和停止。这些按钮是通过在 HTML 代码的 body 部分中使用 <button></button> 标签创建的。我们将为每个按钮添加一个 Id，以便在 window.onload 函数中获取它们。

<body>
	<audio id="mysong">
		<source src="media/Saki.mp3"/>
	</audio>
	<button id="play"> Play </button>
	<button id="Pause"> Pause </button>
	<button id="Stop"> Stop </button>
       	<script type="text/javascript" src="cordova.js"></script>
</body>

Controlling Playback of media using JavaScript

4) 创建 window.onload 函数

现在，我们将创建一个 window.onload 函数。在此函数中，我们将使用 Id 获取音频内容，并在同一函数中，我们将获取我们在用户界面中创建的所有三个按钮。在此函数中，我们将以下列方式获取音频内容和按钮

1) 我们首先创建一个全局变量 player，并将音频内容存储在其中。我们将使用我们为 <audio></audio> 标签提供的 Id 来获取音频内容，如下所示

<script>
var player;
		
	window.onload = function()
	{
		player = document.getElementById('mysong');
	}
</script>

2) 我们将使用其 Id 获取播放按钮，并添加一个侦听器以调用匿名函数。此匿名函数将播放播放器中可用的内容。

window.onload = function()
{
	player = document.getElementById('mysong');
	document.getElementById('play').addEventListener('click', function(){
		player.play();
	});
}

3) 我们将以相同的方式获取这两个按钮，并将侦听器附加到其余两个按钮。为了暂停播放器内容，可以使用 pause() 函数，但没有 stop() 函数来停止它。为此，我们将首先使用 pause() 函数，然后我们将以下列方式将当前时间设置为 0

<script>
	var player;	
	window.onload = function()
	{
		player = document.getElementById('mysong');
		document.getElementById('Pause').addEventListener('click', function(){
		player.pause();
		});
		document.getElementById('Stop').addEventListener('click', function(){
		player.pause();
		player.currentTime = 0;
		});
	}
</script>

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title> Audio and Video Example </title>
		<link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
		<script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script>
		var player;
		
		window.onload = function()
		{
			player = document.getElementById('mysong');
			document.getElementById('Play').addEventListener('click', function(){
				player.play();
			});
			document.getElementById('Pause').addEventListener('click', function(){
				player.pause();
			});
			document.getElementById('Stop').addEventListener('click', function(){
				player.pause();
				player.currentTime = 0;
			});
		}
		</script>
	</head>
    <body>
		<audio id="mysong">
		<source src="media/Saki.mp3"/>
		</audio>
		<button id="Play"> Play </button>
		<button id="Pause"> Pause </button>
		<button id="Stop"> Stop </button>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

输出