【Unity】1分21秒でできるボタンクリックで音を鳴らすにはAudioSourceでやるべし！

#ボタンおしたら音がなる方法
1.ボタンを追加
2.AudioSourceを追加
3.スクリプトかく
4.OnClickをいじる
##注意点
書いた日：2020年7月4日
unityのバージョン：2019.3.14
#完成イメージ
左上のラッパのボタンを押すとクラクションがなります。
（ARのアプリを作っているので背景が緑ですが気にしないでください。）
![スクリーンショット 2020-07-04 18.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/2e2fc179-231a-fd97-fcc6-c6cdc2e4bbd0.png)

#やり方
（１）ボタンを追加します
【UI > Button】
私の場合はボタンをいくつか配置しているのでCunvasの小要素にボタンを作ります。
![スクリーンショット 2020-07-04 18.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/1ef36e1c-bc56-80fd-0a69-2b29799a02e0.png)
テキストがいらないのでデリートします。
![スクリーンショット 2020-07-04 18.22.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/ffae1397-77af-ede8-f478-28799090126d.png)
ボタンのかたちを整えます
写真右側のインスペクターのスケールで変更します
![スクリーンショット 2020-07-04 18.25.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/37f8dc81-b3a4-2563-fffb-f204f8a36fd1.png)
位置をととのえます
左上の前後左右の矢印っぽいところをおすとシーンビューから簡単に移動することができます。
![スクリーンショット 2020-07-04 18.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/7c40fe1d-078d-d599-e5f6-7dae424ee082.png)
写真をセットします。
Assets直下にimagesファイルを作成し、好きな画像を保存します。
![スクリーンショット 2020-07-04 18.27.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/fe3cb3c7-9b7a-591a-20c8-9614ca12a552.png)
Materialをつくります。
Assets直下にMaterialファイルをつくります。
MaterialファイルにMaterialを新規に作成します。
![スクリーンショット 2020-07-04 18.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/39e01cbf-f37d-4db6-af3e-e47d33562a62.png)
Materialに写真を追加していきます
インスペクターのShaderをLegacy Shaders > Diffuseにする。
![スクリーンショット 2020-07-04 18.33.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/b990c34b-dab8-4649-5161-f23c1ca1eae4.png)
写真を追加します。右側のselectをおします。
![スクリーンショット 2020-07-04 18.36.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/5c968776-ccd2-0023-e620-3a4db0e36393.png)
任意の写真を選択します。
![スクリーンショット 2020-07-04 18.37.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/95815dea-0c3c-ed84-627b-9bfabba59bf5.png)
写真を選択したら、Shaderを再度変更します。
UI > Defaultに変更してください
![スクリーンショット 2020-07-04 18.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/1c184058-830e-5ebf-385c-79c763bf296d.png)
ボタンに移動してください。
![スクリーンショット 2020-07-04 18.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/acd52a9d-08e0-3af5-729d-6e48af87b603.png)
右側インスペクターImageを変更します。
Source Imageをnoneに
Materialに先ほど作成したMaterialを設定してください。
設定した画像はこちらです。
先ほどまで四角の白いボタンがhornのボタンに変わりました。
![スクリーンショット 2020-07-04 18.42.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/8128bacd-a64b-e191-a9f2-2f2f3be53812.png)
#Audio Sourceを追加します
ButtonにAudioSourceを追加します。
![スクリーンショット 2020-07-04 18.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/9d284c5a-d57f-d973-f220-8baa714bd791.png)
Assets直下にSoundsファイルを作り音声を追加します。
![スクリーンショット 2020-07-04 18.50.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/39e8a1b8-81f0-3f07-58ff-13e9b3047321.png)
AudioClipに音声を追加します。
私の場合はクラクションです。
![スクリーンショット 2020-07-04 18.52.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/14624c11-9fb4-8598-3d4c-eea34c59e7f0.png)
Play On Awake を無効にします。(写真は有効になっています)
有効な状態だと再生ボタンを押した瞬間になります。
ループしたい人はLoopを有効にしてください。
#スクリプトを書きます
Assets直下にScriptsファイル
その中になんでもいいのでスクリプトをつくってください。
私の場合はHornSoundsです。
![スクリーンショット 2020-07-04 18.54.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/62c6ff71-c232-5539-64a5-f6ee438c15d4.png)
以下のスクリプトをコピペして書き換えてください。

```c#:HornSounds.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HornSounds : MonoBehaviour
{
    //hornsoundは任意の名前でOKです、それ以外は変えないでください。
    private AudioSource hornsound;

    void Start()
    {
        hornsound = GetComponent<AudioSource>();
    }
    //ボタンをクリックした時のスクリプトです。
    public void OnClick()
    {
        hornsound.PlayOneShot(hornsound.clip);
    }

}
```
こんなかんじです
![スクリーンショット 2020-07-04 19.04.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/d210e159-41b3-36ea-b0b8-3d3ada51fe69.png)

Buttonにアタッチします。
![スクリーンショット 2020-07-04 19.06.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/2ce0a287-ac63-204c-3eb5-1c985928fe56.png)
#ButtonのOn Clickをいじる
On ClickにButtonオブジェクトを追加します。
![スクリーンショット 2020-07-04 19.08.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/af7e34b9-f0d9-597c-c4da-376d212abefe.png)
HornSounds > OnClickにしてください。
![スクリーンショット 2020-07-04 19.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631096/24b1120a-67a2-6f68-5891-aa781a417552.png)
完成です！