javascriptで音楽が再生されない

#前提・実現したいこと
ブラウザ内で音声を再生したいのですが、なぜか音楽が再生を押して10分以上待っても再生されません。
コードをよく確認しても、それらしい問題は見つかりません。
どこが間違っているのでしょうか？教えてください。
#発生している問題・エラーメッセージ
何度試しても音楽が流れない
#該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4<link rel=stylesheet href=http://****.**/style.css>
5<meta charset="Shift-JIS">
6<title>テスト</title>
7</head>
8<body>
9<center><div class=top>JavaScriptのテスト</div></center><br>
10<a href=./index.html>戻る</a>
11<hr>
12<center>
13<div class=border-red>
14テストです。<br>
15<button onclick="stop()">停止</button>&nbsp;&nbsp;<button onclick="start()">再生</button>&nbsp;&nbsp; <button onclick="pause()">一時停止</button>
16<script type="text/javascript">
17var music = new audio();
18function init() {
19//音源のロード
20music.preload = "auto";
21music.src = "./sample.mp3";
22music.load();
23//再生押した時
24function start() {
25music.play();
26}
27//停止押した時
28function stop() {
29music.pause();
30music.currenttime = 0;
31}
32//一時停止押した時
33function pause() {
34music.pause();
35}
36init();
37</script>
38<a href=javascript:history.back();>(履歴から)戻る</a>
39</div>
40</center>
41<hr>
42<a href=./index.html>戻る</a>
43</body>
44</html>

css
1html {
2background-color:#bdbdbd;
3}
4.scroll {
5  margin     : auto;
6  width      : 96%;
7  font-size  : 140%;
8  line-height: 1.5em;
9  text-align : center;
10  border     : 1px solid #666;
11  color      : #000000;
12  background : #bdbdbd;
13  overflow   : hidden;
14}
15.scroll span{
16  display     : inline-block;
17  padding-left: 100%;
18  white-space : nowrap;
19  line-height : 1em;
20  animation   : scrollAnime 11s linear infinite;
21}
22@keyframes scrollAnime{
23    0% { transform: translateX(0)}
24  100% { transform: translateX(-100%)}
25}
26.top{
27font-size:40px;
28}
29.border-blue{
30margin:30px;
31padding:10px;
32border:medium solid #0000ff;
33}
34.border-red {
35margin:30px;
36padding:10px;
37border:medium solid #ff0000;
38}
39.red {
40color:#ff0000;
41}
42
43.border-green {
44margin:30px;
45padding:10px;
46border:medium solid #00ff00;
47}
48.border-white {
49margin:30px;
50padding:10px;
51border:medium solid #ffffff;
52}

cssは色々な(自分の)サイトで使うので、今は使われていない部分が多いです。
#補足情報
ipadのsafariで検証

行動規範の内容に同意します

回答1件

ベストアンサー

2か所ミスがあります。

initの中に入れるとglobal変数にならないのでinitの外に出す

new audioではなくnew Audio

javascript
1var music = new Audio();
2
3//音源のロード
4music.preload = "auto";
5music.src = "./sample.mp3";
6music.load();
7//再生押した時
8function start() {
9music.play();
10}
11//停止押した時
12function stop() {
13music.pause();
14music.currenttime = 0;
15}
16//一時停止押した時
17function pause() {
18music.pause();
19}
20

[動作環境]
https://jsfiddle.net/by6tz3r1/

投稿2021/07/30 15:04

youtubeuta

総合スコア150

退会済みユーザー

2021/07/31 01:50

ありがとうございます。おかげで再生することができました。最終的なコードは以下の通りです。 <script type="text/javascript"> var music = new Audio(); music.preload = "auto"; music.src = "./ncs-tobu.mp3"; music.load(); function start() { music.play(); } function stop() { music.pause(); music.currentTime = 0; } function pause() { music.pause(); } </script>

行動規範の内容に同意します