This is a demo page for the BeyondWords Player. As you listen to the audio, the player will automatically update to demonstrate its key features. Additionally, on desktop, you can use the control panel on the right to customize the player and inspect its properties.
This page is intended to help integrators understand the capabilities of the player and to make it easier to add the player to your website. For more detailed documentation, please refer to the player repository on GitHub which includes guides and reference material.
The explanations on this page are split into sections. You can click on the playlist icon in the player above to jump to a specific section to hear about a particular feature. If you have any feedback on this page, please open a GitHub issue. Thank you.
The player supports five different styles: 'small', 'standard', 'large', 'screen' and 'video'.
The small player style, currently visible, is our most compact style and takes up minimal space on your page. When used in the widget at the bottom of the page, it automatically expands and collapses when interacting with it, although you can customize this behavior.
The standard player style is the default and it's what we recommend for most people. It provides a balance of functionality while taking up a small-ish amount of space on the page. On mobile, a right-to-left layout is used since most users are right-handed.
The large player style turns the player into more of a feature on your webpage. It shows an image and supports an additional title that can vary depending on the content or advert that is playing. We recommend this style for playlists of multiple content items.
The screen player style is intended to be used when the player takes up the full screen, i.e. to create a dedicated landing page for your content. We use this style at BeyondWords to provide a URL that allows content to be shared on social media, such as this one.
The video player style is our latest addition that supports video playback. You will soon be able to generate videos of your content being read out word-by-word to make the experience more engaging for your users. We haven't launched this quite yet, but you can see a demo of this feature on this page by setting the 'Player style' dropdown to 'video'.
The player supports a range of color settings to make it fit with your brand. Colors can be set to any CSS value, such as 'red', '#F00' and 'rgb(255, 0, 0)'.
The backgroundColor setting affects the background of the player in all user interfaces, including the widget that appears at the bottom of the screen. Additionally, a linear-gradient can be set to add visual interest. Horizontal and vertical gradients are supported.
The textColor setting is self-explanatory and sets the text color throughout the player. Similarly, the iconColor property allows the buttons and progress bar color to change.
The highlightColor setting changes the color of the text highlights on the page as the article is being read out. Again, this setting supports linear-gradients.
When combined, these color settings create a distinctive look for the player that can fit your brand. Here is an example of a player that might fit a news brand and here is an example of a player that might fit an eco-friendly brand.
Finally, the player allows adverts to "take over" the look of the player. For example, a Domino's Pizza advert could set the colors to match its brand.
As you have probably noticed by now, one of the key features of the BeyondWords player is the ability to playback from segments. This feature allows users to click on a paragraph within your article and the audio will immediately skip to that location.
The added text highlights help users follow along with the content as it is being read out and the hover effect emphasizes that paragraphs can be clicked on. These behaviors can be configured independently, e.g. you can choose not to highlight the current segment.
The segment widget that appears next to paragraphs can be switched on or off or used instead of the ability to click on paragraphs. The segment widget's progress bar changes as you hover over paragraphs within the article to show their start time within the audio.
The segment widget can be positioned in one of twelve positions next to the paragraph. For convenience, these are named after hours on a clock, for example 12-oclock appears at the top, 3-oclock on the right, 6-oclock at the bottom and 9-oclock on the left.
To support segment playback on your website, you will need to add some markers into the HTML of your page, although, if you are using our WordPress plugin, they will be added automatically. Please refer to our dedicated guide for more information.
The player supports 'Media Sessions', which allows users to interact with the player on their phone's lock screen, or other Media Session enabled devices. For example, users can use their wireless headphones to play/pause and skip forwards and backwards.
TODO: add more explanation
Demonstration will be added soon.
Demonstration will be added soon.
Demonstration will be added soon.
Demonstration will be added soon.
Demonstration will be added soon.
Demonstration will be added soon.