複数のaudioを切り替えた際に停止させたい

前提・実現したいこと

audioタグを使用して音声を再生させているのですが、
複数の音声があるため、selectと連動して表示／音声を切り替えたいと考えています。
各selectのvalueと連動してaudioを内包しているdivを切り替えることはできるのですが、
その際に音声を止めてからにしないと二重再生になるうえに、
すでに音声が再生されているプレイヤー自体が非表示になってしまい操作もできません。
selectを変更したタイミングで一旦すべての音声をストップさせたいのですが、うまいやり方がわからず…
いい方法はありますでしょうか？

該当のソースコード

html
1<select>
2    <option value="select">選択してください</option>
3    <option value="col-1">サンプル1</option>
4    <option value="col-2">サンプル2</option>
5    <option value="col-3">サンプル3</option>
6</select>
7<div class="audio">
8    <div class="col-1">
9        <audio preload="auto" controls controlslist="nodownload">
10            <source src="mp3/sample-1.mp3" type="audio/mp3">
11        </audio>
12    </div>
13    <div class="col-2">
14        <audio preload="auto" controls controlslist="nodownload">
15            <source src="mp3/sample-2.mp3" type="audio/mp3">
16        </audio>
17    </div>
18    <div class="col-3">
19        <audio preload="auto" controls controlslist="nodownload">
20            <source src="mp3/sample-3.mp3" type="audio/mp3">
21        </audio>
22    </div>
23</div>
24<script>
25	$('select').change(function () {
26	    var val = $('select option:selected').val();
27	    $('.audio > div').fadeOut();
28	    $('.audio > div.' + val ).fadeIn();
29	});
30</script>