Play a sound without displaying a player?

[sayang]

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

Text

<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()">

Text</button>

 

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.

 

[niche]

define "simple" i relation to your coding skills.

[Ingolme]

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;">

[sayang]

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..

[Ingolme]

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.