ID를 삽입하고 사운드가 재생되도록 추가 사용

Question

나는 사운드 보드에 즐겨 찾기 목록을 추가하려는 초기 작업을하고 있습니다 (이미 localstorage 작업을했습니다). 오디오 작업 방식은 버튼에서 ID를 가져와 .mp3을 추가 한 다음 재생합니다. 나는 코드를 가지고 있는데, 버튼을 누를 때 ID를 가져 와서 다른 버튼을 만들고, 다른 버튼과 같은 방식으로 사운드를 재생해야하는 ID를 삽입합니다. 그러나 그렇지 않습니다. 어떤 아이디어? 말 그대로 코드는 동일하지만 .append가 버튼을 만들 때 사운드를 재생하는 것 같지 않습니다.

관련 favorite.js 자바 스크립트

//audio 
 
var audios = Array.prototype.map.call(
 
    document.getElementsByName("names"), 
 
    function(el) { 
 
    var audio = new Audio(); 
 
    var src = "mp3/" + el.id + ".mp3"; 
 
    el.onclick = function() { 
 
     audio.src = src; 
 
     audio.play(); 
 
    }; 
 
    return audio; 
 
    }); 
 

 
//favorited sound 
 
function reply_click(clicked_id) { 
 
    alert("Added to Favorites"); 
 
    $('#add').append('<span><a href="#/" id="' + clicked_id + '" name="names" class="buttonsf">Sound1</a></span>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#/" id="Sound1" onClick="reply_click(this.id)">Sound1</a> 
 
</div> 
 
<div id="add"> 
 

 
</div> 
 
<script type="text/javascript" src="favorite.js"></script>

Answer 1

클릭 이벤트에 전달 된 값은 함수에 이벤트를 전달합니다 onclick="reply_click(this.id)"onclick="reply_click(event)"에 변경, 그래서 Event

해야 .

clicked_id에서 e으로 변경 (또는 이벤트임을 나타내는 호출을 원하는 경우) e.currentTarget.id을 사용하여 ID에 액세스하여 삽입 할 수 있습니다.

괜찮다 내 아래 예 :

//audio 
 

 
function playAudio(e) { 
 
    let el = e.currentTarget 
 
    var audio = new Audio(); 
 
    var src = "mp3/" + el.id + ".mp3"; 
 
    audio.src = src; 
 
    audio.play(); 
 
    return audio; 
 
} 
 

 
function createListeners() { 
 
    let names = document.getElementsByName("names") 
 
    for (let i = 0; i < names.length; i++) { 
 
    let name = names[i] 
 
    name.removeEventListener('click', playAudio) 
 
    name.addEventListener('click', playAudio) 
 
    } 
 
} 
 

 
document.addEventListener('DOMContentLoaded', e => { 
 
    createListeners() 
 
}) 
 

 
//favorited sound 
 
function reply_click(e) { 
 
    alert("Added to Favorites"); 
 
    $('#add').append('<span><a href="#/" id="' + e.currentTarget.id + '" name="names" class="buttonsf">Sound1</a></span>'); 
 
    createListeners() 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#/" id="Sound1" onClick="reply_click(event)">Sound1</a> 
 
</div> 
 
<div id="add"> 
 

 
</div> 
 
<script type="text/javascript" src="favorite.js"></script>