Jump to content

Play a sound without displaying a player?


Recommended Posts

The objective is to use a browser to view a list of highlighted words in a document and listen to their sounds when clicked.

If you know little about HTML, you can use MS Word to create a table and enter a list of words, then link the words to sounds, which highlights the words. You can then save the document in html format. Examining a link within the html file displays the result as in 1. below.


1. HTML with links


With a text editor you can see that MS Word has created


<a href="sound.mp3">Text</a>


Using a browser, upon clicking on the highlighted ‘Text’, the sound is OK but it also displays the player which hides the document. To return to the document requires clicking on the back arrow. How can the display of the player be avoided?


2. Using a button


The link in the document can be modified as follows

<audio id="mySound"><source src="sound.mp3" type=”audio/mpeg”></audio>

<button onclick="document.getElementById('mySound').play()">



Upon clicking on the button (holding "Text"), the sound plays without displaying the player. But the text is surrounded by a button shape.

Also, it is a significant procedure to create the code for each word in the list, relative to creating a link using MS Word.


Is there a simple way to associate text with sound, with the text highlighted and playing the sound by clicking the text without displaying the player? For example, by using the href structure but referencing an internal function or external function/document which operates on the `reference' to create the sound without displaying the player.


Link to comment
Share on other sites

You can add the onclick attribute to any element. Even to an <a> element. just be sure to return false; at the end to prevent the link from going somewhere.

<a href="#" onclick="document.getElementById('mySound').play(); return false;">
Link to comment
Share on other sites

Thank you Ingolme, that works OK.


<a href="#" onclick="document.getElementById('mySound').play(); return false;">Text</a>


Is there a way of modifying how it works?

Can the onclick `Text' and the name of the sound file be included in the one <a> element, with the name of the sound file passed to a (js) function upon clicking on the text.

That is, one audio playing function and several (eg ten or more) <a> elements containing the audio file names and the pieces of text..

Link to comment
Share on other sites

You need one audio element for each new sound you want to play, just for convenience, because each <audio> element needs multiple children <source> elements with different file types. Each browser supports different file types, so you use the <source> elements to give multiple options.


Creating all those elements dynamically with Javascript would be an unnecessary effort.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...