选中或单击单选按钮时播放音频

Question

<FORM>
    <input type="radio" name="select" id="select1" value="babai" />
        <label for="select1"><img src="Thesis pictures/girl.jpg" alt="Babai" style=width:150px; height=150x;/><br>Babai</label>
        </div>
    <div id="selection2">   
    <input type="radio" name="select" id="select2" value"lalaki"/>
        <label for="select2"><img src="Thesis pictures/boy.jpg" alt="lalaki" style=width:150px; height=150x; /><br>Lalaki</label>
    </div>
    <div id="selection3">
    <input type="radio" name="select" id="select3" value="aso"/>
        <label for="select3"><img src="Thesis pictures/dog.jpg" alt="aso" style=width:150px; height=150x;/><br>Aso</label>
    </div>
    </FORM>

这是我的网页的HTML，里面有图片。我想要，如果你点击图片或收音机，它将立即播放音频。

我的javascript在我测试过的另一个文件中，它是连接的。

function doFirst(){
    item1=document.getElementById('select1');
    item2=document.getElementById('select2');
    item3=document.getElementById('select3');
    var audio1 = new Audio('audio/babai.wav');
    var audio2 = new Audio('audio/lalaki.wav');
    var audio3 = new Audio('audio/aso.wav');

    item1.addEventListener('click',plays1,false);
    item2.addEventListener('click',plays2,false);
    item3.addEventListener('click',plays3,false);


}

function plays1(){
    audio1.play();
}

function plays2(){
    audio2.play();
}

function plays3(){
    audio3.play();
}


window.addEventListener('load',doFirst,false);

我使用此代码，如果单击任何图片，则不会发生任何情况。你们能帮我做这个，帮我简单的代码，我会衷心感谢你们。

Answer 1

您已经在初始化函数中定义了音频1-3，它们的作用范围仅限于该函数，因此在单击时，其他函数无法使用它们。

将音频1-3移出函数的作用域，或者作为全局变量，或者作为某种包装。

为此，将以下行移到doFirst()函数之外：

​

var audio1 = new Audio('audio/babai.wav');
var audio2 = new Audio('audio/lalaki.wav');
var audio3 = new Audio('audio/aso.wav');

​

Answer 2

而不是使用window.addEventListener('load',doFirst,false);，您可以使用window.onload(doFirst());

您可以向每个收音机添加一个onclick属性。例如：

<img src="Thesis pictures/dog.jpg" onclick="plays3()" alt="aso" style=width:150px; height=150x;/>

另外，3个音频变量仅存在于doFirst()方法中。您需要在函数之外声明它们，并且可以在函数中分配它们。您还没有显示3项变量的声明，请确保它们是用前面的var正确声明的。

Answer 3

您在收音机中添加了一个单击列表。它只在单击单选按钮时起作用，而不是图像。但您可以以类似的方式将侦听器添加到图像标签中。

这是一把小提琴，你可以在那里弄乱它。

var imgClickable = document.getElementById('clickable');
imgClickable.onclick = function(){
        alert('clicked Image');
    };