Audio"

From Documentation
Line 33: Line 33:
 
{{versionSince| 9.6.0}}
 
{{versionSince| 9.6.0}}
  
When you call <tt>play(), stop(), pause()</tt> or the audio is played to the end StateChangeEvent will be triggered. You can check the current state by calling event.getState(). Video has 4 states, and you can access them by using <tt>Audio.PLAY, Audio.STOP, Audio.PAUSE and Audio.END</tt>.
+
When you call <tt>play(), stop(), pause()</tt> or the audio is played to the end, an <code>StateChangeEvent</code> will be fired. You can check the current state by calling event.getState(). There are 4 states: <tt>Audio.PLAY, Audio.STOP, Audio.PAUSE and Audio.END</tt>.
  
 
For example:  
 
For example:  
  
If you want to do something after the audio starts to play, you can write codes as shown below (MVVM style).
+
If you want to do something after the audio starts to play, you can write codes as shown below (MVVM pattern).
  
 
<source language="xml">
 
<source language="xml">

Revision as of 06:52, 11 June 2021

Audio

Employment/Purpose

An audio component is used to play the audio at the browser. Like image, you could use the src property to specify an URL of an audio resource, or the setContent method to specify a dynamically generated audio. Developers might be able to control the play of an audio by the play, stop and pause methods.

Example

ZKComRef Audio Example.png

 <audio src="music.wav" controls="true"></audio>
The audio supports controls property since 7.0.0

Supports HTML5

Since 7.0.0

The audio component has now been enhanced to support HTML 5, it includes the properties like autoplay, controls, loop, muted and preload.

Multiple Sources

Since 7.0.0 Most browsers do not support all the audio formats,so we could specify multiple source files in different formats for different browsers. For examples:

 <audio src="music.wav, music.mp3, music.ogg" controls="true"></audio>

StateChangeEvent

Since 9.6.0

When you call play(), stop(), pause() or the audio is played to the end, an StateChangeEvent will be fired. You can check the current state by calling event.getState(). There are 4 states: Audio.PLAY, Audio.STOP, Audio.PAUSE and Audio.END.

For example:

If you want to do something after the audio starts to play, you can write codes as shown below (MVVM pattern).

  <audio onStateChange="@command('stateChange', event=event)" />
  @Command
  public void stateChange(@BindingParam("event") StateChangeEvent event) {
    if (event.getState() == Audio.PLAY) {
      // do something...
    }
  }

Supported Events

Name
Event Type
onStateChange
Event: StateChangeEvent

Notifies when invoking play(), stop(), pause() or the audio is played to the end.

Supported Children

* Track

Use Cases

Version Description Example Location
     

Version History

Last Update : 2021/06/11


Version Date Content
7.0.0 August, 2013 Audio now supports HTML 5
9.5.0 September 2020 ZK-4648: Audio supports to add tracks
9.6.0 May 2021 ZK-4779: audio supports to fire an event upon its playing state



Last Update : 2021/06/11

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.