Phát âm thanh khi nhấn một phím

Question

Có ai biết nếu có cách nào được xác định trước để phát âm thanh cho mỗi chữ được nhập từ bàn phím vào biểu mẫu HTML không?

Ví dụ: Trong trường văn bản nếu tôi nhập Y, trang web cho biết Y, v.v.

Hoặc, cách tốt nhất để làm điều đó là gì?

Answer 1

Bạn phải có tệp âm thanh cho tất cả các chữ cái và gọi cho chúng phát trên sự kiện nhấn nút bằng JavaScript.

Answer 2

Thật dễ dàng để phát âm thanh và thật dễ dàng để thêm trình xử lý vào nhấn phím, nhưng không có cách nào được xác định trước để liên kết hai thao tác, do đó bạn sẽ phải nhập mã của riêng mình.

1) hành động khi nhấn phím

document.onkeydown = function() { 
    ... 

2) chơi âm thanh

Thêm một yếu tố âm thanh:

<audio id=alarm> 
    <source src=sound/zbluejay.wav> 
</audio> 

Và thực hiện nó với

document.getElementById('alarm').play(); 

Bạn có thể ví dụ như xây dựng một bản đồ liên kết mã phím âm thanh id phần tử:

var sounds = { 
    88 : 'alarm', // key 'x' 
    ... 

}; 
document.onkeydown = function(e) { 
    var soundId = sounds[e.keyCode]; 
    if (soundId) document.getElementById(soundId).play(); 
    else console.log("key not mapped : code is", e.keyCode); 
} 

theo năm có thể tìm thấy mã phím here

Answer 3

tôi chỉ viết một kịch bản nhanh chóng mà đơn giản hoá công việc xuống để chỉ HTML cho bạn.

(function(){ 
 
\t var keyElements \t = document.getElementsByTagName('keysound'), 
 
\t \t i \t \t \t = keyElements.length, 
 
\t \t keys \t \t = {}; 
 
\t while (i--){ 
 
\t \t var cur \t \t = (keyElements[i].getAttribute('keys')||"").toString().split(''), 
 
\t \t \t v \t \t = cur.length, 
 
\t \t \t audio \t = keyElements[i].getAttribute('src'), 
 
\t \t \t caseinsensitive \t = keyElements[i].getAttribute('anycase')!==null?true:false, 
 
\t \t \t regexp \t = keyElements[i].getAttribute('regexp')!==null?true:false; 
 
\t \t if (audio){ 
 
\t \t \t while (v--){ 
 
     cur[v] = caseinsensitive ? cur[v] : cur[v].toLowerCase(); 
 
     
 
\t \t \t \t var src=!regexp?audio: 
 
\t \t \t \t audio.replace('${key}', cur[v]) 
 
\t \t \t \t .replace('${code}', cur[v].charCodeAt(0)); 
 
\t \t \t \t var ele = document.createElement('audio'); 
 
\t \t \t \t ele.src = src; 
 
\t \t \t \t document.body.appendChild(ele); 
 
\t \t \t \t (keys[cur[v]] = keys[cur[v]] || []).push(
 
\t \t \t \t \t ele 
 
\t \t \t \t); 
 
\t \t \t \t if (caseinsensitive) { 
 
      
 
\t \t \t \t \t (keys[cur[v].toUpperCase()] = keys[cur[v].toUpperCase()] || []).push(
 
\t \t \t \t \t \t ele 
 
\t \t \t \t \t); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
    console.log(keys); 
 
\t window.addEventListener('keydown',function(evt){ 
 
\t \t var clist \t = keys[evt.key] || [], 
 
\t \t \t clen \t = clist.length; 
 
\t \t while (clen--){ 
 
\t \t \t try { clist[clen].play() } catch(e) {} 
 
\t \t } 
 
\t }); 
 
})();

<!-- Demo code example --> 
 
<keysound keys="abcdefghijklmnopqrstuvwxyz" regexp anycase src="https://the-peppester.github.io/styff/keys/${key}.mp3" /> 
 
<keysound keys="QWERTY" src="http://soundbible.com/mp3/Fart-Common-Everyday-Fart_Mike-Koenig.mp3" /> 
 
<keysound anycase keys="bnm,./;'[]-=+_()*&^%$#@!`~" src="http://soundbible.com/mp3/Iguana_Farts_In_A_Bathtub-Iguana_Farts-1423164123.mp3" /> 
 
<keysound anycase keys="asdfgh" src="http://soundbible.com/mp3/Uuuuuu-Paula-1357936016.mp3" />

Documentation

Kịch bản trên cho ý nghĩa đặc biệt đối với các yếu tố keysound để cho phép bạn chơi âm thanh khi người dùng đẩy xuống trên một phím. Đó là những thuộc tính đặc biệt.

• anycase
  • làm cho các trường hợp phím insenstive
• keys=...
  • các phím mà sẽ chơi âm thanh này
• regexp
  • làm cho nó để URL của mỗi phím có thể khác nhau một cách regexp giống như vậy:
  • ${key} trong URL sẽ được thay thế bởi các đại diện văn bản đơn giản của mỗi một phím tắt tùy
  • ${code} trong URL sẽ được thay thế bởi các cơ sở 10 ASCII đại diện khóa mã của mỗi một phím tắt tùy
• src=...
  • xác định URL của tệp âm thanh. Bị ảnh hưởng bởi thuộc tính regexp

Xem bản trình diễn về ví dụ về chúng.