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

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

ただいまの
回答率

90.54%

  • JavaScript

    16337questions

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

  • HTML

    8924questions

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

HTMLの<audio>タグのsrcにJavaScriptの変数の値を入れたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 182

hiroakikoura

score 5

 HTMLで音声再生ができるようなものを作成しています。JavaScriptの変数内の値を音声ファイルのURLとして指定したい

<audio controls style="width: 865px; height: 1000px; position: absolute; left: 1460px; top: -90px">
   <source id="saisin_id" src="">

上のHTMLの<audio>のソースに下のJavaScriptの変数saisinidに入っているURLを指定したいのですが URIが正しくありません。メディアを読み込めませんでしたと出ます。srcに何も指定していないからだと思います。audioタグのソースに変数saisinidの値を指定するにはどのようにすれば良いでしょうか?

   success: function(data) {
          var obj = JSON.parse(data);
          var goukei = obj.length - 1;
          var saisinid = ("hoge/"+obj[51].id+"/audio.flac");
          var element = document.getElementById("saisin_id");
         element.setAttribute("src", saisinid);
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/27 20:23

    「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象(エラーメッセージなども含む)」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

    キャンセル

  • mts10806

    2018/07/27 20:24

    このJavaScript そもそもですが、もしそのままとしたら文法がおかしいです。インデントも。調整してください。

    キャンセル

回答 2

checkベストアンサー

+2

これでtest.mp3がセットされるけど

<audio controls style="width: 865px; height: 1000px; position: absolute; left: 1460px; top: -90px">
<source id="saisin_id" src="" />
</audio>
<script>
(function(data) {
  var saisinid = "test.mp3";
  var element = document.getElementById("saisin_id");
  element.setAttribute("src", saisinid);
})();
</script>


ちなみに、<source id="saisin_id" src="" />ではsrcが無いので

URI が正しくありません。メディア  を読み込めませんでした。

ってエラー吐く(firefox)
読めないsourceって事でsrcを書き換えても有効にならないね

source要素をcreateElementしてappendChildしてあげればその辺はクリアするけど、デフォルトがある場合以外だとsourceで指定してあげる必要がそもそも無い気がする

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/30 16:23

    source要素をcreateElementしてappendChildすればとりあえずの解決は可能でしょうか?

    キャンセル

  • 2018/07/31 04:05

    静的なHTMLがあって、audioのメディアファイルを指定したいのであれば、audio自体のsrcを書き換えるのがHTML上の流儀って感じはするけどね。
    audioelement.src="test.mp3"; ってするだけだし、audioelementの場合は再生される時点でメディアを読みに行くみたいだから、sourceみたいに読めないメディアの場合に無効化されるようなことも無い。
    まずはやってみて自分で確認した方が早いと思うよ。

    キャンセル

  • 2018/08/01 07:04

    解決できました!
    ありがとうございます!

    キャンセル

+1

audioタグ内のsourceタグにsrcを指定するのではなく、audioタグ自体にsrcを指定するのはいかがでしょうか?
http://www.htmq.com/html5/audio.shtml

<audio controls style="width: 865px; height: 1000px; position: absolute; left: 1460px; top: -90px" id="saisin_id" src="">
function(data) {
var saisinid = ("URL"); //saisinidに音声ファイルの場所が入っています
var element = document.getElementById("saisin_id");
element.setAttribute("src", saisinid);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/30 16:26

    srcに手動でURLを指定しないとできないようです。。。

    キャンセル

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

  • ただいまの回答率 90.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16337questions

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

  • HTML

    8924questions

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