Question

我正在尝试根据单击的图像播放不同的音频文件。但是，现在只播放说话音频文件。

    <script>
        function play(){
        var audio = document.getElementById("audio");
        audio.play();
        }
        </script>
        <li>
        <img src="images/bark.png" value="PLAY"  onclick="play()">
        <audio id="audio" src="audio/speak.mp3" ></audio>
            </li>
            <script>
            function play(){
            var audio = document.getElementById("sit");
            audio.play();
            }
            </script>
            <li>
            <img src="images/sit.png" value="PLAY"  onclick="play()">
            <audio id="sit" src="audio/sit.mp3" ></audio>
            </li>
            <li>

Answer 1

尝试使用多种功能播放不同的音频文件

<script>
    function playSpeak(){
        var audio = document.getElementById("audio");
        audio.play();
    }

    function playSit(){
        var audio = document.getElementById("sit");
        audio.play();
    }
</script>

<li>
    <img src="images/bark.png" value="PLAY"  onclick="playSpeak()">
    <audio id="audio" src="audio/speak.mp3" ></audio>
</li>
<li>
    <img src="images/sit.png" value="PLAY"  onclick="playSit()">
    <audio id="sit" src="audio/sit.mp3" ></audio>
</li>
<li>

或者创建一个可以播放不同音频的通用功能

<script>
    function playAudio(audioId){
        var audio = document.getElementById(audioId);
        audio.play();
    }
</script>

<li>
    <img src="images/bark.png" value="PLAY"  onclick="playAudio('audio')">
    <audio id="audio" src="audio/speak.mp3" ></audio>
</li>
<li>
    <img src="images/sit.png" value="PLAY"  onclick="playAudio('sit')">
    <audio id="sit" src="audio/sit.mp3" ></audio>
</li>
<li>

使用前面的示例：

Answer 2

使用以下代码根据点击的图像播放不同的音频文件。

      <script>
  function play(audioId){

    var sit = document.getElementById('sit');
    var bark = document.getElementById('bark');
    if (sit.duration > 0 && !sit.paused) {
       sit.pause();
       var audio = document.getElementById(audioId);
       audio.play();

    } else if(bark.duration > 0 && !bark.paused){
       bark.pause();
       var audio = document.getElementById(audioId);
       audio.play();
    }else{
       var audio = document.getElementById(audioId);
       audio.play(); 
    }
  }
</script>
<li>
  <img src="images/bark.png" value="PLAY"  onclick="play('sit')">
  <audio id="sit" src="audio/sit.mp3" ></audio>
</li>
<li>
  <img src="images/sit.png" value="PLAY"  onclick="play('bark')">
  <audio id="bark" src="audio/bark.mp3" ></audio>
</li>

让我知道，这对你有用。

Answer 3

这是由于类似的功能名称。该程序无法区分两个play()不同的播放功能，它只执行第一个发生的功能！

<script>
function playSpeakAudio(){
    var audio = document.getElementById("audio");
    audio.play();
}
</script>
<script>
function playSitAudio(){
    var audio = document.getElementById("sit");
    audio.play();
}
</script>

        <li>
        <img src="images/bark.png" value="PLAY"  onclick="playSpeakAudio()">
        <audio id="audio" src="audio/speak.mp3" ></audio>
        </li>

            <li>
            <img src="images/sit.png" value="PLAY"  onclick="playSitAudio()">
            <audio id="sit" src="audio/sit.mp3" ></audio>
            </li>
            <li>

Answer 4

我认为这样做

<script>
  function play(audioId){
    var audio = document.getElementById(audioId);
    audio.play();
  }
</script>
<li>
  <img src="images/bark.png" value="PLAY"  onclick="play('bark')">
  <audio id="bark" src="audio/speak.mp3" ></audio>
</li>
<li>
  <img src="images/sit.png" value="PLAY"  onclick="play('sit')">
  <audio id="sit" src="audio/sit.mp3" ></audio>
</li>

Answer 5

试试这个：

<script>
    function play(id){
        var audio = document.getElementById(id);
        audio.play();
    }
</script>

<li>
    <img src="images/bark.png" value="PLAY"  onclick="play('audio')">
    <audio id="audio" src="audio/speak.mp3" ></audio>
</li>
<li>
    <img src="images/sit.png" value="PLAY"  onclick="play('sit')">
    <audio id="sit" src="audio/sit.mp3" ></audio>
</li>

单击不同图像时播放不同的歌曲

5 个答案: