ボタンクリックでJSにコードを追加

Question

私はこれらのボタンを押して音を鳴らし、押されたときにこれらの音がループするようにするボタンを作りたかったのです。私は、コード

function aud1play() { 
    aud1.src = "aud1.mp3"; 
    aud1.play(); 
} 
document.getElementById('aud1button').addEventListener('click', aud1play); 

function aud2play() { 
    aud2.src = "aud2.mp3"; 
    aud2.play(); 
} 
document.getElementById('aud2button').addEventListener('click', aud2play); 

function aud3play() { 
    aud3.src = "aud3.mp3"; 
    aud3.play(); 
} 
document.getElementById('aud3button').addEventListener('click', aud3play); 

名前（AUD1、aud2、aud3）を取り、（名）.loopを配置する方法があるので示し病気、正しくこれを説明する方法を知りません。実際に（名前）.loopを書き込むことなくボタンを押すことで各機能の下に表示されます。すべての人のために？

Answer 1

この

JSをお試しください：

function play(){ 
    var audio = document.getElementById("audio"); 
    audio.play(); 
} 

HTML5：

<audio controls loop id="audio"> 
    <source src="horse.mp3" type="audio/mpeg"> 
</audio> 

Answer 2

あなたはbind方法をご覧ください：https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/

function playAudio(type) { 
    aud.src = (type === '1') ? 
    "aud1.mp3" : 
    (type === "2") ? 
    "aud2.mp3" : 
    "aud3.mp3"; 

    aud.play(); 
} 

document.getElementById('aud1button').addEventListener('click', playAudio.bind("1")); 
document.getElementById('aud2button').addEventListener('click', playAudio.bind("2")); 
document.getElementById('aud3button').addEventListener('click', playAudio.bind("3")); 

Answer 3

あなたにこのような何かを行うことができます：

<button class="audio-button-toggle-play" data-audio-src="aud1.mp3">Play/Pause the first audio</button> 
<button class="audio-button-toggle-play" data-audio-src="aud2.mp3">Play/Pause the second audio</button> 
<button class="audio-button-toggle-play" data-audio-src="aud3.mp3">Play/Pause the third audio</button> 
<button class="audio-button-toggle-loop" data-audio-src="aud1.mp3">Enable/Disable looping of the first audio</button> 
<button class="audio-button-toggle-loop" data-audio-src="aud2.mp3">Enable/Disable looping of the second audio</button> 
<button class="audio-button-toggle-loop" data-audio-src="aud3.mp3">Enable/Disable looping of the third audio</button> 

その方法は、あなたがそれぞれのオーディオ用の新しい関数を作成する必要はありません。

// create an object containing all audio objects 
var audios = (function() { 
    var names = ['aud1.mp3', 'aud2.mp3', 'aud3.mp3']; 
    var audios = {}; 

    for (var index in names) { 
    var audio = audios[names[index]] = new Audio(); 
    audio.src = names[index]; 
    } 

    return audios; 
})(); 

function toggleAudioPlay() { 
    // "this" refers to the button that was clicked 
    var name = this.getAttribute('data-audio-src'); // read the button's "data-audio-src" attribute 
    if (!audios.hasOwnProperty(name)) { 
    // audio doesn't exist 
    return; 
    } 
    var audio = audios[name]; 
    audio.src = name; 
    // toggle the play state 
    if (audio.paused) { 
    audio.play(); 
    } else { 
    audio.pause(); 
    } 
} 

function toggleAudioLoop() { 
    var name = this.getAttribute('data-audio-src'); 
    if (!audios.hasOwnProperty(name)) { 
    // audio doesn't exist 
    return; 
    } 
    var audio = audios[name]; 
    audio.loop = !audio.loop; 
} 

document.querySelector('.audio-button-toggle-play').forEach(function (button) { 
    button.addEventListener('click', toggleAudioPlay); 
}); 

document.querySelector('.audio-button-toggle-loop').forEach(function (button) { 
    button.addEventListener('click', toggleAudioLoop); 
}); 

を今、あなたは、次のHTMLを持つことができます。新しいオーディオファイルを「名前」配列に追加し、特別なクラス（オーディオの再生状態を切り替えるためにaudio-button-toggle-play）とオーディオファイルの場所を含むdata-audio-src属性のボタンを追加するだけです。