Audio的使用(3)--使用 Media 事件添加进度栏

最新推荐文章于 2022-12-06 14:33:15 发布

load_life

最新推荐文章于 2022-12-06 14:33:15 发布

阅读量1.2k

点赞数

分类专栏： html5 文章标签： audio function javascript tools button 图形

html5 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

media 对象提供了大量事件以供选择，audio 对象可使用这些事件。可利用一组事件来获取可用于在播放音频文件时跟踪进度的状态数据。

使用状态事件

HTML5 media 对象提供了与 audio 和 video 对象共享的许多方法、属性和事件。在本主题中，您将了解如何注册多个 media 事件以跟踪当前处于播放模式下的音频文件的进度。

通过基于使用 JavaScript 控制 Audio 对象中的示例进行构建，可以使用事件来显示文件的状态，一个事件用来驱动进度栏，另一个事件用来在加载完网页时加载事件。

下面的示例演示在播放文件和暂停文件时引发的事件。这些事件用于切换“播放”按钮上的标签。在播放音频文件时，按钮标签将显示为“Pause”；在暂停音频文件时，按钮标签将显示为“Play”。

var oAudio =document.getElementById_x('myaudio');

//set up event to toggle play buttonto pause when playing

oAudio.addEventListener("playing", function() {

document.getElementById_x("play").textContent = "Pause";

}, true);

//set up event to toggle play button to play whenpaused

oAudio.addEventListener("pause", function() {

document.getElementById_x("play").textContent = "Play";

},true);

除状态事件之外，首次加载脚本时还将注册DOMContentLoaded 事件。该事件是 Windows Internet Explorer 9的一个新事件，它会在加载完所有文档对象模型 (DOM) 和脚本内容时引发。通过使用该事件，可以确保加载所需元素，而不用等到加载图像和内容后进行此操作。当引发该事件时，它会调用加载其他事件的函数。

//this event gets fired when a pagehas loaded

window.addEventListener("DOMContentLoaded", initEvents, false);

使用 JavaScript 控制 Audio 对象中描述了名为“快进”和“快退”的功能。

添加进度栏

如使用JavaScript 控制 Audio 对象主题中所述，audio 对象将使用 currentTime 属性来跟踪当前播放位置。可以通过重新设置 currentTime 属性在 currentTime 音频文件中进行搜索。通过使用 timeupdate 事件，可在时间发生更改时获取并显示时间。还可使用 currentTime 属性更新进度栏。

在播放音频文件时，只要 currentTime 发生更改，就会引发 timeupdate 事件。下面的示例将注册 timeupdate 事件，该事件会在 currentTime 发生更改时引发。

//set up event to update the progressbar

oAudio.addEventListener("timeupdate", progressBar, true);

在引发timeupdate 事件时，该事件将调用 progressBar 函数，然后此函数会更新进度栏。

progressBar 函数首先会获取 currentTime 并使用 Math.round 方法将其四舍五入为最接近的整数，来为 elapsedTime 获取一个值。虽然无需为进度栏对此值进行四舍五入，但建议在打印时执行此操作以避免出现问题。

var oAudio =document.getElementById_x('myaudio');

//set up event to toggle play button to pause whenplaying

oAudio.addEventListener("playing", function() {

document.getElementById_x("play").textContent = "Pause";

}, true);

//set up event to toggle play button to play whenpaused

oAudio.addEventListener("pause", function() {

document.getElementById_x("play").textContent = "Play";

}, true);

function progressBar() {

var oAudio =document.getElementById_x('myaudio');

//get current time inseconds

var elapsedTime =Math.round(oAudio.currentTime);

//update the progress bar

if (canvas.getContext) {

var ctx =canvas.getContext("2d");

//clear canvas beforepainting

ctx.clearRect(0, 0, canvas.clientWidth,canvas.clientHeight);

ctx.fillStyle = "rgb(255,0,0)";

var fWidth = (elapsedTime /oAudio.duration) * (canvas.clientWidth);

if (fWidth > 0){

ctx.fillRect(0, 0, fWidth, canvas.clientHeight);

}

进度栏使用canvas 元素来创建一个矩形区域，将逐步填充此区域以显示音频文件中的当前位置。Canvas 是一个 HTML5 元素，它提供了一个包含可用来绘制图形或显示图像的方法和属性的丰富图形区域。在使用 canvas 元素时，建议您在使用功能前先进行测试。与 audio 元素类似，canvas 元素允许您将故障转移文本或代码置入页面的 HTML 部分。

HTML5 audio not supported

</audio>

canvas not supported

</canvas>

在示例的 JavaScript 部分，代码将测试由document.getElementById_x()返回的 canvas 对象。如果支持 canvas 标记，则将获取一个对象；否则，它将返回 undefined。然后，JavaScript 代码将检查 getContext 方法支持，并调用它以将一个 contextRenderingContext2D对象返回到 "ctx" 变量中。 Internet Explorer 9中当前仅支持 2d 上下文，而 W3C 允许其他类型的上下文。

contextRenderingContext2D 对象包含大部分绘图和图形方法以及属性，可用它们来创建图形并在 canvas 元素上显示图像。每次调用 progressBar 函数时，如果用户已在文件中向后退，则清除 canvas 以避免显示错误。可通过将 currentTime 值除以 audio 对象的 duration 属性的值来计算填充宽度，再将所得结果乘以 canvas 的 clientWidth 以提供 canvas 宽度的百分比，然后在 fillRect 方法中使用该值来填充 canvas。

除非 canvas 上包含一些图形，否则将不设置颜色。在下面的示例中，您将使用层叠样式表 (CSS) 样式来勾勒 canvas 进度栏的轮廓。如果没有轮廓，则在开始播放文件之前，您将看不到进度栏。

进度栏还可用于在音频文件内部进行移动。将鼠标 click 事件注册到一个函数，该函数将更新单击位置所对应的位置处的 currentTime。在单击进度栏时，它将基于 canvas 中光标的相对 X 位置计算并设置 currentTime，如以下示例所示。

//set up mouse click to controlposition of audio

canvas.addEventListener("click",function(e) {

//this might seem redundant, but thisthese are needed later - make global to remove these

var oAudio =document.getElementById_x('myaudio');

var canvas =document.getElementById_x('canvas');

if (!e){

e = window.event;

} //get the latestwindows event if it isn't set

try {

//calculate the current time based on position ofmouse cursor in canvas box

oAudio.currentTime = oAudio.duration * (e.offsetX /canvas.clientWidth);

}

catch (err){

// Fail silently but show in F12developer tools console

if(window.console&&console.error("Error:"+ err));

}

}, true);

}

前面的函数和代码示例演示了有关如何在网页上播放音频文件、显示进度栏和控制音频文件的播放位置的基础知识。下面的示例将使用离散调用以便在需要 canvas 和 audio 对象时获取它们。在您自己的代码中，您可能需要创建全局变量，或者将播放器封装到自己的全局对象中。

可对播放器进行扩展，以使用播放列表、在播放音乐时显示不断变化的图像、使用多个audio 元素或使用示例音频创建虚拟仪器

下面的示例包含本主题中的所有代码示例，并将这些代码示例进行组合以显示完整过程。将其复制并粘贴到一个 HTML 文件中，然后开始体验。

<!DOCTYPE html>

<html>

<head>

<title>Using media events to add a progressbar to an audio player</title>

#canvas

{ margin-top:10px;

border-style:solid;

border-width:1px;

padding:3px;

}

</style>

//Global variable to track current filename

var currentFile = "";

//display and update progressbar

function progressBar() {

var oAudio =document.getElementById_x('myaudio');

//get current time inseconds

var elapsedTime =Math.round(oAudio.currentTime);

//update the progress bar

if (canvas.getContext) {

var ctx =canvas.getContext("2d");

//clear canvas beforepainting

ctx.clearRect(0, 0, canvas.clientWidth,canvas.clientHeight);

ctx.fillStyle = "rgb(255,0,0)";

var fWidth = (elapsedTime /oAudio.duration) * (canvas.clientWidth);

if (fWidth > 0){

ctx.fillRect(0, 0, fWidth, canvas.clientHeight);

}

//Play and pause function

functionplayAudio() {

try {

//return objects we need to workwith

var oAudio =document.getElementById_x('myaudio');

var btn =document.getElementById_x('play');

var audioURL =document.getElementById_x('audiofile');

//Skip loading if current file hasn'tchanged.

if (audioURL.value !== currentFile){

oAudio.src = audioURL.value;

currentFile = audioURL.value;

}

//Tests the paused attribute and setstate.

if (oAudio.paused) {

oAudio.play();

btn.textContent = "Pause";

}

else {

oAudio.pause();

btn.textContent = "Play";

}

catch (e) {

// Fail silently but show in F12developer tools console

if (window.console&&console.error("Error:" + e));

}

//Rewinds the audio file by 30seconds.

function rewindAudio() {

try {

var oAudio =document.getElementById_x('myaudio');

oAudio.currentTime -= 30.0;

}

catch (e) {

// Fail silently but show in F12developer tools console

if(window.console&&console.error("Error:" + e));

}

//Fast forwards the audio file by 30seconds.

function forwardAudio() {

try {

var oAudio =document.getElementById_x('myaudio');

oAudio.currentTime += 30.0;

}

catch (e) {

// Fail silently but show in F12developer tools console

if (window.console&&console.error("Error:" + e));

}

//Restart the audio file to thebeginning.

function restartAudio() {

try {

var oAudio =document.getElementById_x('myaudio');

oAudio.currentTime = 0;

}

catch (e) {

// Fail silently but show in F12developer tools console

if (window.console&&console.error("Error:" + e));

}

//added events

function initEvents() {

var canvas =document.getElementById_x('canvas');

var oAudio =document.getElementById_x('myaudio');

//set up event to toggle play buttonto pause when playing

oAudio.addEventListener("playing", function() {

document.getElementById_x("play").textContent = "Pause";

}, true);

//set up event to toggle play buttonto play when paused

oAudio.addEventListener("pause", function() {

document.getElementById_x("play").textContent = "Play";

}, true);

//set up event to update the progressbar

oAudio.addEventListener("timeupdate", progressBar, true);

//set up mouse click to controlposition of audio

canvas.addEventListener("click", function(e) {

//this might seem redundant, but thisthese are needed later - make global to remove these

var oAudio =document.getElementById_x('myaudio');

var canvas =document.getElementById_x('canvas');

if (!e) {

e = window.event;

} //get the latest windows event if itisn't set

try {

//calculate the current time based onposition of mouse cursor in canvas box

oAudio.currentTime = oAudio.duration * (e.offsetX /canvas.clientWidth);

}

catch (err) {

// Fail silently but show in F12developer tools console

if (window.console&&console.error("Error:" + err));

}

}, true);

}

//this event gets fired when a pagehas loaded

window.addEventListener("DOMContentLoaded", initEvents, false);

</script>

</head>

<body>

<h1>HTML5 audio player with progressbar</h1>

<p>

</p>

HTML5 audio not supported

</audio>

<p>

Play

</button>

Rewind

</button>

Fast forward

</button>

Restart

</button>

</p>

<p>

canvas not supported

</canvas>

</p>

//Check for support and enablebuttons

if (window.HTMLAudioElement){

document.getElementById_x("play").disabled = false;

document.getElementById_x("rewind").disabled = false;

document.getElementById_x("forward").disabled = false;

document.getElementById_x("restart").disabled = false;

}

</script>

</body>

</html>

load_life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Audio的使用(3)--使用 Media 事件添加进度栏

media 对象提供了大量事件以供选择，audio 对象可使用这些事件。可利用一组事件来获取可用于在播放音频文件时跟踪进度的状态数据。使用状态事件HTML5 media 对象提供了与 audio 和 video 对象共享的许多方法、属性和事件。在本主题中，您将了解如何
复制链接

扫一扫

专栏目录