Audio player and screen readers

Product:

WonderPlugin Audio Player

Question:

The buttons to play or pause are not seen by the screen readers. Is there any way to add the feature?

Answer:

You could add HTML code in the webpage to create extra text player controls so they can be read with screen readers. For example:

<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').playAudio();return false;">Click to play</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').pauseAudio();return false;">Click to pause playing</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').stopAudio();return false;">Click to stop playing</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').audioRun(-1);return false;">Switch to next audio</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').audioRun(-2);return false;">Switch to previous audio</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').rewind(10);return false;">Rewind 10 seconds</a>

<a href="#" onclick="jQuery('#wonderpluginaudio-1').data('object').forward(10);return false;">Forward 10 seconds</a>

In the above code, there is a number 1 in the code wonderpluginaudio-1. It's the ID of the player. If your player has a different ID, change the number accordingly.

You could also add accesskey attribute to the text link so the command can be activated by shortcut keys. For example:

<a href="#" accesskey="p" onclick="jQuery('#wonderpluginaudio-1').data('object').playAudio();return false;">Click to play</a>

<a href="#" accesskey="a" onclick="jQuery('#wonderpluginaudio-1').data('object').pauseAudio();return false;">Click to pause playing</a>

<a href="#" accesskey="s" onclick="jQuery('#wonderpluginaudio-1').data('object').stopAudio();return false;">Click to stop playing</a>

<a href="#" accesskey="n" onclick="jQuery('#wonderpluginaudio-1').data('object').audioRun(-1);return false;">Switch to next audio</a>

<a href="#" accesskey="r" onclick="jQuery('#wonderpluginaudio-1').data('object').audioRun(-2);return false;">Switch to previous audio</a>

<a href="#" accesskey="e" onclick="jQuery('#wonderpluginaudio-1').data('object').rewind(10);return false;">Rewind 10 seconds</a>

<a href="#" accesskey="f" onclick="jQuery('#wonderpluginaudio-1').data('object').forward(10);return false;">Forward 10 seconds</a>

For how does the accesskey work and how to access the shortcut key on different web browsers, please view https://www.w3schools.com/tags/att_global_accesskey.asp

A demo is as follows: