Question

我正在尝试播放声音A时单击按钮A，声音B时单击B等，在HTML5音频中，使用javascript。我正在处理代码，我对我的函数和变量感到困惑。但我认为最好的方法是有一个playAudio（a）播放a.mp3等功能，但我不能让它工作。

以下示例的输入ID定义了正在播放的声音，但我无法使其动态化。

的Javascript

var a = sounds/a.mp3
var b = sounds/b.mp3

function playX() {
    var xAudio = document.getElementById('xxx');
         xAudio.src = $("#audiofile").val();          
    xAudio.play();   
}

HTML：

<input id="audiofile" type="text" value="sounds/a.mp3" /><br />
<input id="audiofileb" type="text" value="sounds/b.mp3" /><br />

<button id="play" onclick="playX();">        A    </button>
<button id="play" onclick="playX();">        B    </button>
<button id="play" onclick="playX();">        C   </button>



<audio id="xxx">  
</audio>

Answer 1

var a = sounds/a.mp3
var b = sounds/b.mp3

function playX(id) {
    var xAudio = document.getElementById('xxx');
         xAudio.src = $("#audiofile"+id).val();          
    xAudio.play();   
}

和html：

<input id="audiofileA" type="text" value="sounds/a.mp3" /><br />
<input id="audiofileB" type="text" value="sounds/b.mp3" /><br />
<input id="audiofileC" type="text" value="sounds/c.mp3" /><br />

<button id="play" onclick="playX('A');">        A    </button>
<button id="play" onclick="playX('B');">        B    </button>
<button id="play" onclick="playX('C');">        C   </button>

Answer 2

有很多方法可以做到这一点。

将文件名作为参数传递：

<button id="play" onclick="playX('sounds/a.mp3');">A</button>


function playX(file) {
    xAudio.src = file         
    xAudio.play();   
}

Answer 3

如果您使用JQuery，您可以执行以下操作：

<button id="play" data-audiotrack="audiofile">        A    </button>
<button id="play" data-audiotrack="audiofileb">        B    </button>
<button id="play" data-audiotrack="audiofilec">        C   </button>

$('#play').click(function() {
    var audioTrack = $(this).data('audiotrack');
    var xAudio = document.getElementById(audioTrack);
    xAudio.src = $("#audiofile").val();          
    xAudio.play();
});

单击按钮时更改javascript函数的值

3 个答案: