0

我正在尝试使用 javascript 在 HTML5 音频中单击按钮 A 时播放声音 A，单击 B 时播放声音 B 等。我正在处理代码，我对我的函数和变量感到困惑。但我认为最好的方法是拥有一个 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>
4

3 回答 3

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>
于 2013-01-16T15:14:22.010 回答
0

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

将文件名作为参数传递：

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


function playX(file) {
    xAudio.src = file         
    xAudio.play();   
}
于 2013-01-16T15:14:04.320 回答
0

如果您使用 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();
});
于 2013-01-16T15:15:02.987 回答