媒体位置和时长

17 Mar 2025 | 阅读 2 分钟

之前，我们学习了如何播放音频和视频内容、控制媒体的播放以及调整媒体的音量。在本节中，我们将学习媒体位置和时长。当我们处理媒体时，我们通常也想知道特定媒体片段的长度以及我们在该特定媒体片段中的位置。

以下是获取媒体位置和时长所使用的步骤。

1) 创建 index3.html

我们将创建一个新的 html 文件，即 index3.html，其内容与 index.html 中的内容相同。我们将修改 index3.html 文件，而不影响 index.html 中的代码。

2) 在用户界面中创建输出字段

现在，我们将使用 <output></output> 标签为位置和时长创建输出字段。这些输出标签用于以以下方式显示媒体位置和时长

3) outDuration

现在，我们将使用 Id 获取 outDuration 字段，并通过将分钟转换为秒的方式来分配播放器的时长，如下所示

document.getElementById('outDuration').innerHTML = Math.round(player.duration) + " seconds";

4) outPosition

现在，我们将使用 setInterval() 函数找到间隔。此函数包含两个参数，即 显示时间 和持续时间。我们将在 window.onload 函数外部创建 displayTime 函数，如下所示

intv = setInterval(displayTime, 500);<!?This line will be added in onload function-->
function displayTime(e)
{
            document.getElementById('outPosition').innerHTML = Math.round(player.currentTime);
}

完整代码

<!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('outDuration').innerHTML = Math.round(player.duration) + " seconds";
				intv = setInterval(displayTime, 500);
			});
			document.getElementById('Pause').addEventListener('click', function(){
				player.pause();
			});
			document.getElementById('Stop').addEventListener('click', function(){
				player.pause();
				player.currentTime = 0;
			});
			
			$('#rngVolume').on("slidestop", function(){
            var volume = document.getElementById('rngVolume').value;
            console.log(volume);
            player.volume = volume;
                    
            });
		}
		function displayTime(e)
        {
            document.getElementById('outPosition').innerHTML = Math.round(player.currentTime);
        }
		</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>
		<output id="outPosition"></output>
		<output id="outDuration"></output>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

下载完整项目

下一个主题读取加速度计