音が鳴るボタンを作る

・ ボタンクリックで音が鳴るようにしたい

もっと簡単な記述の方法はあると思いますが、思いの外難しかったのでメモ書き

音声ファイルはmp3しか扱っていません

０.作業に入る前に準備として、使いたい音声を assets/audios のなかに保存

１.準備ができたら HTML のボタンを作ってあるところに audio要素を配置

例）
`

　　
　　

`

audioタグは音声ファイルを再生することができるマルチメディア系のタグです。気になった方は調べてみてください。
音声を自動で読み込むかどうかの指定をpreload属性で行うことができます。今回はauto(自動)に設定し、ボタンのクリックと同時に音が鳴るように preload="auto" を使用しています。

２.次に JavaScript でHTMLの要素を取得し、clickイベントの発火

例）
window.addEventListener("DOMContentLoaded", () => { 　　const audio = document.getElementById("audio"); 　audio.addEventListener('click', function(){ 　　document.getElementById("sounds").currentTime = 0; 　　document.getElementById("sounds").play(); 　}); });

idからdiv要素を取得し、クリックされたときに事前にpreload属性で読み込んでおいた音声が鳴るようにしています。（div要素である必要はありません）
clickイベントの発火後audio要素をidから取得し、playで再生されます。 currentTimeは再生位置の確認や音声の長さを設定できます。currentTime = 0は、ボタンを連続で押したときそれに合わせて連続で音が鳴るように記述しています。

以上で音が鳴るボタンは完成です。
audioタグを増やせば複数の音声を使用できますし、JavaScriptの記述によっては複数の音声から1つの音声を鳴らすこともできます。

音が鳴るボタンをつくれない方はJavaScriptが読み込まれていない。若しくはaudioファイルが読み込まれていない可能性が高いです。

後者の場合 assets/config/manifest.jsの中に//= link_tree ../audios .mp3と記述し、config/webpacker.ymlのstatic_assets_extensions:に.mp3と記述してみてください