/** * EGroupware eTemplate2 - JS Audio tag * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @package etemplate * @subpackage api * @link https://www.egroupware.org * @author Hadi Nategh * @copyright EGroupware GmbH */ /*egw:uses /vendor/bower-asset/jquery/dist/jquery.js; et2_core_interfaces; et2_core_baseWidget; */ import { et2_baseWidget } from './et2_core_baseWidget'; import { ClassWithAttributes } from "./et2_core_inheritance"; import { et2_register_widget } from "./et2_core_widget"; /** * This widget represents the HTML5 Audio tag with all its optional attributes * * The widget can be created in the following ways: * * var audioTag = et2_createWidget("audio", { * audio_src: "../../test.mp3", * src_type: "audio/mpeg", * muted: true, * autoplay: true, * controls: true, * loop: true, * height: 100, * width: 200, * }); * * Or by adding XET-tag in your template (.xet) file: * * */ /** * Class which implements the "audio" XET-Tag * * @augments et2_baseWidget */ export class et2_audio extends et2_baseWidget { constructor(_parent, _attrs, _child) { super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_audio._attributes, _child || {})); this.audio = null; this.container = null; //Create Audio tag this.audio = new Audio(); // Container this.container = document.createElement('div'); this.container.append(this.audio); this.container.classList.add('et2_audio'); if (this.options.autohide) this.container.classList.add('et2_audio_autohide'); if (this.options.controls) this.audio.setAttribute("controls", '1'); if (this.options.autoplay) this.audio.setAttribute("autoplay", '1'); if (this.options.muted) this.audio.setAttribute("muted", '1'); if (this.options.loop) this.audio.setAttribute("loop", '1'); if (this.options.preload) this.audio.setAttribute('preload', this.options.preload); this.setDOMNode(this.container); } /** * Set audio source * * @param {string} _value url */ set_src(_value) { if (_value) { this.audio.setAttribute('src', _value); if (this.options.src_type) { this.audio.setAttribute('type', this.options.src_type); } //preload the audio after changing the source/ only if preload is allowed if (this.options.preload != "none") this.audio.load(); } } /** * @return Promise */ play() { return this.audio.play(); } pause() { this.audio.pause(); } currentTime() { return this.audio.currentTime; } seek(_time) { this.audio.currentTime = _time; } } et2_audio._attributes = { "src": { "name": "Audio", "type": "string", "description": "Source of audio to play" }, "src_type": { "name": "Source type", "type": "string", "description": "Defines the type the stream source provided" }, "muted": { "name": "Audio control", "type": "boolean", "default": false, "description": "Defines that the audio output should be muted" }, "autoplay": { "name": "Autoplay", "type": "boolean", "default": false, "description": "Defines if audio will start playing as soon as it is ready" }, "controls": { "name": "Control buttons", "type": "boolean", "default": true, "description": "Defines if audio controls, play/pause buttons should be displayed" }, "loop": { "name": "Audio loop", "type": "boolean", "default": false, "description": "Defines if the audio should be played repeatedly" }, "autohide": { "name": "Auto hide", "type": "boolean", "default": false, "description": "Auto hides audio control bars and only shows a play button, hovering for few seconds will show the whole controlbar." }, "preload": { "name": "preload", "type": "string", "default": 'auto', "description": "preloads audio source based on given option. none(do not preload), auto(preload), metadata(preload metadata only)." } }; et2_register_widget(et2_audio, ["audio"]); //# sourceMappingURL=et2_widget_audio.js.map