.play（）を呼び出すと、「キャッチされていない（約束された）」DOMExceptionが作成されます：要素には、サポートされているソースがありません。エラー

Question

私はWes BosのJavascript30チュートリアルに従おうとしていますが、 "Javascript Drum Kit"サイトを作ろうとしたときに、再生するサウンドが得られませんでした。適切なサウンドファイルがありますが、私はサウンドを再生しようとするキーを押したとき、私は、コンソールを検査したときに、このエラーメッセージが表示されます。

jsdrumkit.html:66 - Uncaught (in promise) DOMException: The element has no supported sources.

これは、サイトのJavascriptのです：

function playSound(e){ 
    //querySelector() is just when you need a single return value 
    //audio[input] is an attribute selector, and it works just like its CSS counterpart. 
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); 
    if(!audio) return; 
    audio.currentTime = 0; //rewind the file to the start 

    audio.play(); //**line 66 in the site's code** 
    console.log(key); 
    key.classList.toggle('playing'); 
} 

function removeTransition(e) { 
    if(e.propertyName !== 'transform') return; //skip if it's not a transform 
    this.classList.remove('playing'); 
} 

const keys = document.querySelectorAll('.key'); 
keys.forEach(key => key.addEventListener('transitionend', removeTransition)); 
window.addEventListener('keydown', playSound); 

.play（）を動作させることさえできない場合、私は何が欠けていますか？

Answer 1

Firefoxで再生してみてください。昨年のChromeのアップデートでは、約束や部分的なコンテンツなどが含まれていると音声再生に問題が発生しました。私は解決策に取り組んでいますが、現在のところ情報が見つかりません：Audio from Icecast server not playing in Chrome