控制音乐播放

管理员01  发布于:2014-11-23  浏览:

摘要:audio元素是基于HTMLAudio这个DOM对象的,而它派生自HTMLMediaElement对象。它提供了很多非常有用的方法和属性用来控制音频的播放,比较常见的属性如表12.2所示。 这些属性在JavaScript中都为布尔类型,取值为true或false。如果希望当网页一打开后,马上播放音频,则可以在audio标签内部放入autoplay属性,controls属性会在网页上显示一个播放器界面,不同的浏览器中对于这个播放器界面的实现会略有不同。loop会对当前的音乐进行循环播放,即播放完成之后又从头开始播放。preload属性用来对音频进行预加载,它适用于不是自动播放的音频文件。src作为核心的属性,用来指定一个或多个音频文件,可以使用子元素source来同时指定多个可选择的音频文件,audio元素会根据浏览器的支持特性选择其中之一进行播放。 除了这些基本的属性之外,如果想要通过JavaScript控制
  audio元素是基于HTMLAudio这个DOM对象的,而它派生自HTMLMediaElement对象。它提供了很多非常有用的方法和属性用来控制音频的播放,比较常见的属性如表12.2所示。

   这些属性在JavaScript中都为布尔类型,取值为true或false。如果希望当网页一打开后,马上播放音频,则可以在<audio>标签内部放入autoplay属性,controls属性会在网页上显示一个播放器界面,不同的浏览器中对于这个播放器界面的实现会略有不同。loop会对当前的音乐进行循环播放,即播放完成之后又从头开始播放。preload属性用来对音频进行预加载,它适用于不是自动播放的音频文件。src作为核心的属性,用来指定一个或多个音频文件,可以使用子元素<source>来同时指定多个可选择的音频文件,audio元素会根据浏览器的支持特性选择其中之一进行播放。
   除了这些基本的属性之外,如果想要通过JavaScript控制音频播放,比如定义一个自己的播放器外观或在自己的HTML 5应用中需要播放和停止音频,就需要了解更多与音频播放相关的属性。audio对象提供了一系列的属性、事件和方法,使得用户可以创建出属于自己的音乐播放器。
  audio元素是一个HTMLAudioElement类型的对象,因此可以在JavaScript代码中直接控制这个对象的属性和方法创建自己的音乐播放器。在列出这些属性和方法之前,先看一个简单的HTML 5实现的简易播放器的例子,实现效果如图12.11所示。

  在这个示例中,用户在文本框中输入要播放的音频文件,然后单击“播放”按钮,就会将文本框中指定的音频作为audio元素的src属性进行播放。同时按钮会变为“暂停”状态。单击提示文本为“暂停”的按钮,则会暂停音乐的播放,并且按钮的文本内容变为“播放”。可以单击“前进”和“后退”按钮向前30秒继续播放或是向后30秒后播放。
  下面的步骤介绍这个播放器的实现过程:
  (1)在HTML页面上放置了1个audio元素、1个input元素和4个button元素,如代 码12.8所示:

  可以看到,页面上放置了一个名为myaudio的<audio>标签,同时4个按钮的onclick事件都关联了事件处理代码,这些事件处理代码将调用audio元素的各种属性和事件来进行音乐的播放和暂停。
  (2)对于playAudio方法来说,它将获取在文本框中输入的音乐文件名,将它作为audio元素的src属性值,然后调用HTMLAudioElement对象的play方法播放这个音频,实现如代码12.9所示:


  在JavaScript代码部分定义了一个全局的currentFile用来保存音频文件的路径。如果单击“播放”按钮并且没有变更音频文件,则不会设置audio元素的src属性。代码中获取到文件名之后,如果音频文件发生了变更,则设置audio对象的src属性,并更新currentFile变量。代码接下来会判断Audio对象的状态,通过获取paused只读属性的值来判断当前播放器是处于“播放”状态还是“暂停”状态,如果为“暂停”状态,则调用HTMLAudioElement的play方法播放音频,否则调用pause方法暂停音乐的播放。
  (3)“后退”和“前进”按钮分别调用rewindAudio和forwardAudio,用于根据audio元素的currentTime属性值来变更播放的时间实现前进和后退的效果,在示例中“前进”按钮将增加currentTime属性值30秒模拟前进的效果,“后退”按钮将currentTime属性值减少30秒模拟后退的效果。除此之外,restartAudio这个方法重新播放音频,也更改了currentTime属性,它将该属性设置为0,表示从头开始播放音频,实现重新播放的效果。这3个方法的实现如代码12.10所示:


  可以看到,代码仅仅只是设置了currentTime属性值,并没有重新调用play或pause来播放或暂停音乐,这是因为currentTime属性只会直接更改当前播放的位置,赋值即可让其马上发生改变,因此就实现了前进、后退和重新播放的效果。
  通过这个示例,可以看到paused、currentTime及用来控制“播放”或“暂停”的方法的使用。audio元素提供了如表12.3所示的只读的属性值,这些属性只能获取其值而不能更改。

  这些只读的属性只能获取audio元素的信息,比如duration可以显示音频当前已经播放的时间长度,可以用这个长度来显示一个进度条。除此之外,audio元素还有很多可以改变播放器行为的属性,常见的如表12.4所示。

  除了这些属性之外,要控制Audio对象,还必须掌握如表12.5所示的几个方法。

  除了这些属性和方法之外,要想灵活地控制audio元素,还必须掌握几个事件。事件是指在音频播放过程中当一些行为触发之后,允许响应这些行为添加自己的处理代码。比如音量改变之后,会触发volumechange事件,此时可以重新绘制音量信息以响应这种改变。audio元素的几个比较重要的事件如表12.6所示。

  了解了audio元素常见的属性、方法和外观之后,就可以借助这些功能来打造自己的音乐播放器了。

文章链接:http://www.jihai.com/a/jiaocheng/html5-css3/201411/831.html
标签:audio(3)音乐(2)播放(4)控制(8)基于(4)元素(26)是(83)
作者:管理员01 来源:未知 发布于2014-11-23 15:07
您可能喜欢的文章

热门模板
热门阅读
热门插件