`Audio` element

since

beta 0.3

description

Creates an audio player.

syntax

newAudio("ELEMENT_NAME","AUDIO_FILE_NAME.MP3")

"ELEMENT_NAME": The name of the newly-created element.
"AUDIO_FILE_NAME.MP3" : The name of the audio file.

note(s)

The "URL" argument can be omitted if:
- The audio file has been uploaded to your experiment’s Resource folder; or
- The URL has been added as a default host URL by the command AddHost.
By default, PennController preloads all resources, which means that an experiment will not start until the audio stream is stored in the browser’s cache. For more information on audio streams, see HTML Audio.
As of June 2019, some browsers prevent multimedia content from automatically playing before the user has interacted with the page. Do not assume playback will automatically start, if this is the first thing that should happen when your participants open the experiment page. You should have a screen that asks participants to interact with the page, for example by clicking a Button, before playing any audio.

example

// example

Action commands

`audio.disable`

syntax

.disable()

description

Disables the audio player interface controls.

example

click to expand


@// Option 1:
@newAudio("sentence", "test.mp3")
@    .print()
@    .play()
@    .wait()
$    .disable()
@
@// Option 2:
@newAudio("sentence", "test.mp3")
@    .print()
$    .disable()
@    .play()
@    .wait()

↳ Option 1: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

↳ Option 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

https://www.pcibex.net/wiki/audio-settings-disable/

optional parameters

.disable(OPACITY)

↑ back to top

`audio.log`

syntax

getAudio(“ELEMENT_NAME”).log()

description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

example

click to expand

// example

↑ back to top

`audio.once`

syntax

getAudio(“ELEMENT_NAME”).once()

description

example

click to expand

// example

↑ back to top

`audio.pause`

syntax

getAudio(“ELEMENT_NAME”).pause()

description

example

click to expand

// example

↑ back to top

`audio.play`

syntax

getAudio(“ELEMENT_NAME”).play()

description

example

click to expand

// example

↑ back to top

`audio.print`

syntax

getAudio(“ELEMENT_NAME”).print()

description

example

click to expand

// example

↑ back to top

`audio.remove`

syntax

getAudio(“ELEMENT_NAME”).remove()

description

example

click to expand

// example

↑ back to top

`audio.stop`

syntax

getAudio(“ELEMENT_NAME”).stop()

description

example

click to expand

// example

↑ back to top

`audio.wait`

syntax

getAudio(“ELEMENT_NAME”).wait()

description

example

click to expand

// example

optional parameters

.wait(“first”)
.wait(TEST_COMMAND)

↑ back to top

`standard.after`

syntax

getX(“ELEMENT_NAME”).after(getX(“ARGUMENT_NAME”))

description

Takes an element as an argument, and adds that element’s content to the right of the element that the command is called on.

example

click to expand


@// Option 1: Pass a new element as an argument
@newTrial("option-1",
@    newText("center", "BANANA")
@        .before(newText("left", "apple"))
$        .after(newText("right", "orange"))
@        .print()
@)
@
@// Option 2: Pass an existing element as an argument
@newTrial("option-2",
@    newText("left", "apple")
@    ,
@    newText("right", "orange")
@    ,
@    newText("center", "BANANA")
@        .before(getText("left"))
$        .after(getText("right"))
@        .print()
@)

↳ Prints appleBANANAorange to the screen.

↑ back to top

`standard.before`

syntax

getX(“ELEMENT_NAME”).before(getX(“ARGUMENT_NAME”))

description

Takes an element as an argument, and adds that element’s content to the left of the element that the command is called on.

example

click to expand


@// Option 1: Pass a new element as an argument
@newTrial("option-1",
@    newText("center", "BANANA")
$        .before(newText("left", "apple"))
@        .after(newText("right", "orange"))
@        .print()
@)
@
@// Option 2: Pass an existing element as an argument
@newTrial("option-2",
@    newText("left", "apple")
@    ,
@    newText("right", "orange")
@    ,
@    newText("center", "BANANA")
$        .before(getText("left"))
@        .after(getText("right"))
@        .print()
@)

↳ Prints appleBANANAorange to the screen.

↑ back to top

`standard.center`

syntax

getX(“ELEMENT_NAME”).center()

description

Horizontally centers the element.

example

click to expand


@newButton("centered-button", "Hello, button!")
$    .center()
@    .print()

↳ Prints a horizontally centered button that says Hello, button!.

↑ back to top

`standard.css`

syntax

getX(“ELEMENT_NAME”).css(“CSS_PROPERTY”, “VALUE”)

description

Applies the specified CSS property and value pair to the element.

example

click to expand


@newText("framed-text", "Hello, text!")
$    .css("border", "solid 1px red")
@    .print()
*,
@newButton("orchid-smallcaps-button", "Hello, button!")
$    .css({"background-color":"orchid", "font-variant":"small-caps"})
@    .print()

↳ Prints Hello, text! surrounded by a 1px solid red border. On a new line, prints a button with an orchid background color that says Hello, button! in small caps.

optional parameters

getX(“ELEMENT_NAME”).css({“CSS_PROPERTY_1”:”VALUE_1”, “CSS_PROPERTY_2”:”VALUE_2”})

↑ back to top

`standard.cssContainer`

syntax

getX(“ELEMENT_NAME”).cssContainer(“CSS_PROPERTY”, “VALUE”)

description

Applies the specified CSS property and value pair to the container of the element.

example

click to expand

newText("center", "BANANA")
    .before(newText("left", "apple"))
    .after(newText("right", "orange"))
    .css("color", "red")
    .cssContainer("background-color", "aqua")
    .print()

↳ Prints appleBANANAorange to the screen. The substring BANANA has a red text color, and the entire string has an aqua background color.

optional parameters

getX(“ELEMENT_NAME”).cssContainer({“CSS_PROPERTY_1”:”VALUE_1”, “CSS_PROPERTY_2”:”VALUE_2”})

↑ back to top

`standard.disable`

syntax

getX(“ELEMENT_NAME”).disable()

description

Disables any interactive feature of the element.

example

click to expand


@// example

↑ back to top

`standard.enable`

syntax

getX(“ELEMENT_NAME”).enable()

description

Enables any interactive feature that was previously disabled.

example

click to expand

// example

↑ back to top

`standard.hidden`

syntax

getX(“ELEMENT_NAME”).hidden()

description

Hides an element. If the element is printed, it occupies space on the screen but its content is not visible.

example

click to expand


@newText("hidden-text", "Surprise!")
$    .hidden()
@    .print()
*,
@newButton("reveal", "Click to reveal a surprise")
@    .print()
@    .wait()
*,
@getText("hidden-text")
@    .visible()

↳ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

↑ back to top

`standard.left`

syntax

getX(“ELEMENT_NAME”).left()

description

example

click to expand

// example

↑ back to top

`standard.print`

syntax

getX(“ELEMENT_NAME”).print()

description

example

click to expand

// example

↑ back to top

`standard.refresh`

syntax

getX(“ELEMENT_NAME”).refresh()

description

example

click to expand

// example

↑ back to top

`standard.remove`

syntax

getX(“ELEMENT_NAME”).remove()

description

example

click to expand

// example

↑ back to top

`standard.right`

syntax

getX(“ELEMENT_NAME”).right()

description

example

click to expand

// example

↑ back to top

`standard.scaling`

syntax

getX(“ELEMENT_NAME”).scaling()

description

example

click to expand

// example

that zooms an element in/out to fit the argument(s), which can be: a ratio (with 1 for 100%), a unit dimension (eg. “10vw”), or the page/screen (pass "page")

↑ back to top

`standard.selector`

syntax

getX(“ELEMENT_NAME”).selector()

description

example

click to expand

// example

↑ back to top

`standard.setVar`

syntax

getX(“ELEMENT_NAME”).setVar()

description

example

click to expand

// example

↑ back to top

`standard.size`

syntax

getX(“ELEMENT_NAME”).size()

description

example

click to expand

// example

↑ back to top

`standard.visible`

syntax

getX(“ELEMENT_NAME”).visible()

description

example

click to expand


@newText("hidden-text", "Surprise!")
@    .hidden()
@    .print()
*,
@newButton("reveal", "Click to reveal a surprise")
@    .print()
@    .wait()
*,
@getText("hidden-text")
$    .visible()

↳ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

↑ back to top