質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1200閲覧

javascriptを埋め込みにすると動作が変わった

Ito_Kazuki_

総合スコア124

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/10/08 21:04

編集2020/10/09 08:13

前提・実現したいこと

先日、音楽をランダムに、且つ連続で再生するJavaScriptをTeratailの質問を参考の元作成させていただきました。そこでJavaScriptをHTMLに埋め込む形式で同様のものを作りたいと思っています。

以前の質問:音楽を繰り返し再生する

発生している問題・エラーメッセージ

実際に行ってみたところ、1曲目は再生されるものの、2曲目以降が自動で再生しなくなりました。

万が一、埋め込みにするとそういった動作ができなくなるのであれば、その旨を教えていただけると幸いです。

該当のソースコード

以下の以前の形のHTML・Javascriptでは動作します。
※正常な動作:自動でランダムに連続で再生される

HTML

1<div id="audiowrap"> 2 <audio id="audioElement" controls> 3 <source id="srcElement" src="" type="audio/mp3"> 4 </audio> 5</div> 6<script type="text/javascript"> 7var src = [ 8 'https://*******/file/mp3/001.mp3', 9 'https://*******/file/mp3/002.mp3', 10 'https://*******/file/mp3/003.mp3', 11 ]; 12 var randmize_wrapper = function () { 13 var rand = Math.floor( Math.random() * src.length ); 14 return rand; 15 } 16 var currentRand = 0; 17 document.addEventListener("DOMContentLoaded", function(){ 18 var rand = randmize_wrapper(); 19 document.getElementById("srcElement").setAttribute('src', src[rand]); 20 currentRand = rand; 21 var audio_elm = document.getElementById("audioElement"); 22 audio_elm.load(); 23 audio_elm.play(); 24 }); 25 var audio_elm = document.getElementById("audioElement"); 26 audio_elm.addEventListener('ended', function(){ 27 var rand = randmize_wrapper(); 28 while ( currentRand == rand ) { 29 rand = randmize_wrapper(); 30 } 31 currentRand = rand; 32 document.getElementById("srcElement").setAttribute('src', src[rand]); 33 audio_elm.load(); 34 }); 35</script>

今回のコード(正常動作しない)

HTML

1<div id="audiowrap"> 2 <audio id="audioElement" controls> 3 <source id="srcElement" src="" type="audio/mp3"> 4 </audio> 5</div> 6<script type="text/javascript" src="https://*******/file/js/play.js"> 7</script>

Javascript

1var src = [ 2 'https://*******/file/mp3/001.mp3', 3 'https://*******/file/mp3/002.mp3', 4 'https://*******/file/mp3/003.mp3', 5 ]; 6 var randmize_wrapper = function () { 7 var rand = Math.floor( Math.random() * src.length ); 8 return rand; 9 } 10 var currentRand = 0; 11 document.addEventListener("DOMContentLoaded", function(){ 12 var rand = randmize_wrapper(); 13 document.getElementById("srcElement").setAttribute('src', src[rand]); 14 currentRand = rand; 15 var audio_elm = document.getElementById("audioElement"); 16 audio_elm.load(); 17 audio_elm.play(); 18 }); 19 var audio_elm = document.getElementById("audioElement"); 20 audio_elm.addEventListener('ended', function(){ 21 var rand = randmize_wrapper(); 22 while ( currentRand == rand ) { 23 rand = randmize_wrapper(); 24 } 25 currentRand = rand; 26 document.getElementById("srcElement").setAttribute('src', src[rand]); 27 audio_elm.load(); 28 });

補足情報

ブラウザ:GoogleChrome
※ブラウザの仕様を考え、IEでも行いましたが、結果は同じでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/10/08 21:06

あまり「teratail」のタグは関係ないのでは
Ito_Kazuki_

2020/10/08 21:07

すみません。ミスです。修正します。
miyabi_takatsuk

2020/10/08 22:26

> 2曲目以降が自動で再生しなくなりました これはどういうことでしょうか? 何度リロードしても、一曲目しか流れない、と言う事でしょうか? それとも、意図として、 曲の再生が終わった時、 次の違う曲がランダムで再生されるようにしたいが、そうならない、 なのでしょうか? > ※コードはIE・Safariに対応しているものでお願いします。 この書き方は、作業依頼に感じてしまう可能性があるので、やめましょう。
Ito_Kazuki_

2020/10/09 08:12

> ※コードはIE・Safariに対応しているものでお願いします。 わかりました。気を付けます。(修正しておきます。) >2曲目以降が自動で再生しなくなりました これは、今までは1曲終了するとすぐに2曲目が自動で再生されていたのにも関わらず、 Scriptを埋め込みにしてから再度再生ボタンを押さないと次が再生されなくなってしまっていたということです。 ※ 以前は 再生クリック→1曲目再生→1曲目終了・2曲目開始→・・・ 現在は 再生クリック→1曲目作成→1曲目終了→再生クリック→2曲目再生→・・・ といった感じです。
guest

回答2

0

"ended"の方。`audio_elm.play();が入ってないだけでは?
"DOMContentLoaded"のように書けばループ再生されうのではないかと。

投稿2020/10/09 00:47

tomomo

総合スコア430

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

どうも、お久しぶりです。あの作品が役に立ってるようで何よりです。

うまく動いてると書いてるほうも張り付けたコードでは連続再生されないはずです。
うまく動いてると言ってるほう、動かないと言ってるほう共にコピーミスかどうか分かりませんが
コードが1行抜けてます。

tomomo様がご指摘されているように、'ended'のイベントリスナーのコードが1行抜けています。
以前の質問のページを開いてコードを見てもらえば、抜けているのがわかるはずです。

一応抜けているのを追加したコードを念のため載せておきます。これを別ファイルで読み込んでもらえば動くはずです。

javascript

1var src = [ 2 'https://*******/file/mp3/001.mp3', 3 'https://*******/file/mp3/002.mp3', 4 'https://*******/file/mp3/003.mp3', 5 ]; 6 var randmize_wrapper = function () { 7 var rand = Math.floor( Math.random() * src.length ); 8 return rand; 9 } 10 var currentRand = 0; 11 document.addEventListener("DOMContentLoaded", function(){ 12 var rand = randmize_wrapper(); 13 document.getElementById("srcElement").setAttribute('src', src[rand]); 14 currentRand = rand; 15 var audio_elm = document.getElementById("audioElement"); 16 audio_elm.load(); 17 audio_elm.play(); 18 }); 19 var audio_elm = document.getElementById("audioElement"); 20 audio_elm.addEventListener('ended', function(){ 21 var rand = randmize_wrapper(); 22 while ( currentRand == rand ) { 23 rand = randmize_wrapper(); 24 } 25 currentRand = rand; 26 document.getElementById("srcElement").setAttribute('src', src[rand]); 27 audio_elm.load(); 28 audio_elm.play();//コピーミスで抜けてましたよ。これがないと再生されません 29 });

投稿2020/10/09 02:55

編集2020/10/09 03:37
nekora

総合スコア501

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ito_Kazuki_

2020/10/09 08:26

ありがとうございます。確認してみます。
Ito_Kazuki_

2020/10/09 09:32

無事動作しました。ありがとうございました!
nekora

2020/10/10 03:28

動いてよかったです。埋め込みでも、外部ファイルでも動作するように作ってありますので安心してください。 ただし、埋め込みの場合、jQueryではなくネイティブなJavaScriptでgetElementByIdなどやってるので HTMLコードの先頭に置くとDOMの読み込みが完了してないため要素が拾えません。 埋め込みの場合はBODYの一番最後に入れるようにしてください。そうすれば動きます。
nekora

2020/10/10 18:13 編集

各回答のところの四角の数字をポイントすると、回答の評価の値を増減できます。今回の回答はtomomo様のご指摘が早かった上に的を射てるのでtomomo様の評価を上げてさしあげてください。せっかく指摘してくださったのに、評価0は失礼ですよ。
Ito_Kazuki_

2020/10/13 06:34

ご説明ありがとうございます。評価させていただきました。
nekora

2020/10/13 21:33

えーと・・・ねだるようでみっともないから明記しなかったんですが、ベストアンサーを付けるだけではなくベストアンサーも役に立ったので、ベストアンサーの評価も上げるようにしてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問