只需点击字母“e”并播放音频

Question

你好我的朋友，我很抱歉我再次打开主题。 :(

在这个“Web开发”的建议我尝试用下面的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