Skip to main content

Player Visibility

You might want to show or hide the player based on whether the page is loaded or whether the article is playing. We provide several a configuration property called visibility to do this.

Example

Here's an example where the widget is not shown initially, but is shown when the article starts playing. This is a common use-case for publishers, where the inline player is shown and the widget appears when the article begins playing from the inline player.

import(
"https://storage.googleapis.com/speechify-api-cdn/speechifyapi.min.mjs"
).then(async (speechifyWidget) => {
// widget configuration
const config = {
rootElement: document.getElementById("article"),
useSpeechifyRoot: true,
// all custom visibility options go in this object
visibility: {
showWidget: false,
showWidgetOnPlay: true,
},
};
// initialize the widget with config and mount it on the page
const widget = speechifyWidget.makeSpeechifyExperience(config);
await widget.mount();
});

Visibility Properties

Here are the visibility properties used to show or hide the player:

Property NameMeaningDefault Value
showWidgetwhether the widget should be shown onloadtrue
maximizeWidgetwhether the widget should be maximized onloadtrue
showInlinePlayerwhether the inline player should be shown onloadtrue if inlinePlayerElement is provided
showInlinePlayerOnPlaywhether the inline player should be shown on playtrue
showWidgetOnPlaywhether the widget should be shown on playtrue
maximizeWidgetOnPlaywhether the widget should be maximized when the article is playedtrue