简体   繁体   中英

Make links play .mp3 file

Please see working code here: http://jsfiddle.net/hrnDG/6/

I would like to modify this code so all possible answers become links to .mp3 files. When the user clicks any of these links, the audio file is played. The user can then select their answer and press submit.

How can I go about doing this? Is there something simple I can apply to my code to get this to work? I'm worried that adding something might disable the right and wrong CSS classes.

Please know: If anyone thinks there is a more efficient/easier way than turning the link into a playable mp3 link, I'm all ears.

Many thanks!

My code:

<form>
<table>
<tr class="q1">                       
    <td>What sounds like a rabbit?</td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Java" id="answers_1_Java" />
        <label for="answers_1_Java">A</label></td>
    <td>
        <input class="radiostyle right" type="radio" name="answers" value="JavaScript" id="answers_1_JavaScript" />
        <label for="answers_1_JavaScript">B</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Ruby" id="answers_1_Ruby" />
        <label for="answers_1_Ruby">C</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="C#" id="answers_1_C#" />
        <label for="answers_1_C#">D</label></td>
    <td><input class="submit submit-1" type="submit" value="Submit" /></td>
    <td></td></tr></table></form>​

JS

$('.submit').click(function() {
$(this).closest('tr')
    .find('[name="answers"]')
        .removeClass('checked')
    .filter(':checked')
        .addClass('checked');
return false;
});​

If you can assume that your users have an HTML5 enabled browser, you can add a hidden <audio> element to the page and play it from your script.

<audio hidden="hidden" id="sound">  
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
</audio> 

If the <audio> is supported within their browser, then use JavaScript to start the player by the following code:

document.getElementById("sound").play();

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM