文字「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で達成しようとしていることが分かりませんので、削除しました。

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