문자 "e"를 클릭하고 오디오를 재생하십시오.

Question

안녕하세요 제 친구와 제가 다시 주제를 열어 사과드립니다. :(나는 다음과 JS와 함께 할 노력이 "웹 개발자"제안에

. 그렇지 않으면 클릭하면 사용자가 소리를들을 수 e를 클릭하면, 그렇지. 소리를들을 것이다 E을 클릭하면 e을 듣게 될 것입니다 소리를 내고 싶었지만 작동하지 않는다고 말하지는 마십시오. 어떻게 할 수 있습니까? 또한 마우스를 글자 만 부딪혀 커서 포인터가되어 밑줄 문자가 표시되면 클릭 만하면됩니다. 이 편지는 소리를들을 수 있습니다.

var audioletter = document.getElementById("audiolettersound"); 
 
var whoIsPlaying = null; 
 
var letterstring = "WEb Developer"; 
 

 
function clickOnletter() { 
 
    for (var i = 0; i < letterstring.length; i++) { 
 
    var c = letterstring.indexOf("e"); 
 
    if (c == "e") { 
 
     if (whoIsPlaying != 'H1') { 
 
     audioletter.pause(); 
 
     audioletter.play(); 
 
     whoIsPlaying = 'H1'; 
 
     audioletter.currentTime = 0; 
 
     } 
 
    } 
 
    } 
 
} 
 
document.getElementById('test').innerHTML = letterstring;

<audio id="audiolettersound"> 
 
    <source src="https://www.freesound.org/data/previews/380/380739_5450487-lq.ogg" type="audio/ogg"> 
 
    <source src="https://www.freesound.org/data/previews/380/380739_5450487-lq.mp3" type="audio/mpeg"> 
 
     Your browser does not support the audio element. 
 
</audio> 
 

 
<h1 id="test" onclick="clickOnletter()"></h1>

Answer 1

전적으로이 문제를 완전히 다르게 설정할 것입니다. 인구의 일부로 문자열을 사전 처리합니다. 이렇게하면 클릭 할 때마다 전체 문자열을 순환하지 않고 클릭 한 문자를 비교하면됩니다.

whoIsPlaying 코드를 사용하여 달성하고자하는 것이 확실하지 않으므로 제거했습니다. W, P 또는 D를 재생해야하는 음성을 눌러 온

var audioletter = document.getElementById("audiolettersound"); 
 
var letterstring = "WEb Developer"; 
 
var h1Elem = document.getElementById('test'); 
 

 
function clickOnletter(letter) { 
 
    // if the letter clicked is an "e" 
 
    if (letter == "e") { 
 
    audioletter.pause(); 
 
    audioletter.play(); 
 
    audioletter.currentTime = 0; 
 
    } 
 
} 
 

 
function spanSplit(input) { 
 
    // create an array of letters from our string 
 
    var inputLetters = input.split(''); 
 
    // reconnect each letter by wrapping it in a span with a data-value attribute of its lowercase letter 
 
    return inputLetters.reduce(function(returnString, letter) { 
 
    return returnString + '<span data-value="' + letter.toLowerCase() + '">' + letter + '</span>'; 
 
    }, ''); 
 
} 
 

 
h1Elem.innerHTML = spanSplit(letterstring); 
 
// Get the element, add a click listener... 
 
h1Elem.addEventListener("click", function(e) { 
 
    // e.target is the clicked element! 
 
    // If it was a SPAN item 
 
    if (e.target && e.target.nodeName == "SPAN") { 
 
    // pass the data-value attribute to the clickOnLetter function 
 
    clickOnletter(e.target.getAttribute('data-value')); 
 
    } 
 
});

h1 span[data-value="e"]{ 
 
    cursor:pointer; 
 
    text-decoration:underline; 
 
}

<audio id="audiolettersound"> 
 
     <source src="https://www.freesound.org/data/previews/380/380739_5450487-lq.ogg" type="audio/ogg"> 
 
     <source src="https://www.freesound.org/data/previews/380/380739_5450487-lq.mp3" type="audio/mpeg"> Your browser does not support the audio element. 
 
    </audio> 
 

 
<h1 id="test"></h1>

JS FIDDLE