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

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

ただいまの
回答率

88.58%

JavaScriptでHTMLの書き換えがうまく行きません。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,353

Yukiyama7.4

score 20

前提・実現したいこと

JavaScriptで選択された音声ストリームの再生とHTMLの書き換えを行っています。
音声ストリームにはURLと配信元の名前が入っているのですが、名前の表示がうまく行きません。

ソースコード

<!DOCTYPE html>

<html lang="ja">

    <head>
        <meta charset="utf-8">
        <title>HTMLで作るネットラジオ</title>
            <style type="text/css" media="all">
                h1 {
                    border-bottom : 1px dotted #ffffff;
                    font-size : 14pt;
                    font-weight: bold;
                    font-family: Tahoma;
                    width : 484px;
                    height: 25px;
                }
                ul {
                    list-style : none;
                    margin: 0px;
                    padding: 0px;
                    transform: rotate(0.028deg);
                }
                li {
                    width : 200px;
                    background-color:#eeeeee;
                    padding: 2px;
                    border:1px solid #dfdfdf;
                }
                li:hover {
                    background-color:#dddddd;
                    border:1px solid #bfbfbf;
                }
                #playListArea {
                    width : 223px;
                    height: auto;
                    background-color: #f8f8f8;
                    border:2px solid #707070;
                    overflow: scroll;
                    margin-top:10px;
                    margin-left:auto;
                    margin-right:auto;
                }
                #controller {
                width : 227px;
                height: 36px;
                background-color: #505050;
                margin-left:auto;
                margin-right:auto;
                }
                #ctime {
                position: relative;
                left: 40px;
                top: -30px;
                color: white;
                font-size: 10px;
                font-family: Tahoma;
                font-weight: bold;
                transform: rotate(0.028deg);
                }
                #playButton {
                margin-left:2px;
                margin-top:1px;
                width:34px;
                }
                #music_title {
                font-weight: bold;
                color : #0000000;
                text-shadow: 1px 1px 1px #ffffff,
                    -1px 1px 1px #ffffff,
                    1px -1px 1px #ffffff,
                    -1px -1px 1px #ffffff;
                transform: rotate(0.028deg);
                }
            </style>
    </head>
    <body>
        <div id="playListArea"></div>
        <div id="controller">
            <img src="images/on.png" id="playButton">
            <div id="ctime">00:00</div>
            <div id="music_title">No Play</div>
        <div>
                <script type="text/javascript">
                    var fileList = [
                        { name : 'Radio Nintendo', url : 'http://play.radionintendo.com/stream' },
                        { name : 'smooth JAZZ 247', url : 'http://pub6.jazzradio.com:80/jr_smoothjazz247' },
                        { name : 'Hard House UK', url : 'http://hhuk.netmindz.net:8000/;' },
                        { name : 'Game-Streams Radio', url : 'http://69.175.94.98:8015/;'},
                        { name : 'Radio Danz', url :'http://server1.radiodanz.com:8000/;'},
                    ];
                    var audioObj = new Audio();
                    var playFlag = false;
                    var playList = '<ul>';
                    var crtTime = document.getElementById('ctime');
                    var pButton = document.getElementById('playButton');
                    var broadcast = document.getElementById('music_title');

                    for(var i=0; i<fileList.length; i++){
                            playList += '<li onclick=start_music("'+fileList[i].url+'")>'; //恐らくここで「fileList[i].name」が入っていない?
                            playList += fileList[i].name + '</li>';
                    }
                    playList += '</ul>';
                    document.getElementById('playListArea').innerHTML = playList;
                    function start_music(url,name){
                            audioObj.pause();
                            audioObj = new Audio(url);
                            broadcast.innerHTML = name; //ここで書き換えたいが、「undefined」と表示される。
                            audioObj.play();
                            audioObj.addEventListener('timeupdate', function(){
                                    var sec = '0' + Math.floor(audioObj.currentTime % 60);
                                    var min = '0' + Math.floor(audioObj.currentTime / 60);
                                    sec = sec.substr(sec.length-2, 2);
                                    min = min.substr(min.length-2, 2);
                                    crtTime.innerHTML = +min+":"+sec;
                                }, true);
                            playFlag = true;
                            pButton.src = 'images/off.png';
                        }
                    pButton.addEventListener('click', function(){
                        if (playFlag == false){
                        playFlag = true;
                        audioObj.play();
                        pButton.src = 'images/off.png';
                    }else{
                        playFlag = false;
                        audioObj.pause();
                        pButton.src = 'images/on.png';
                    }
                }, true);
            </script>
    </body>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

start_musicの引数にファイル名も渡すのはどうでしょうか?

function start_music(url,fileName){
  // 略
}

もしくは,fileListの要素自体を渡すか

function start_music(music){
  // 略
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/12/07 18:48

    呼び出し元のonclickを対応するように書き換えてもダメですか?
    ```javascript
    playList += '<li onclick=start_music("'+fileList[i].url+'","' + fileList[i].name + '")>';
    // とすれば
    function start_music(url,fileName){
    // 略
    }
    の第二引数にファイル名が入ると思うのですが。
    ```

    キャンセル

  • 2015/12/08 07:46

    playList += '<li onclick=start_music("'+fileList[i].url+'","'+fileList[i].name+'")>';
    上記にすると表示は正常なものの、押しても反応が無くなります・・・。

    キャンセル

  • 2015/12/08 07:53

    反応が無いとはどういうことでしょうか?

    話は変わりますが、jQueryは使えない環境でしょうか?

    キャンセル

+1

もしかしたらYukiyama7.4さんの趣旨から外れる内容になるかもしれませんが、いっそangularなどを少し勉強されて導入すれば、この手のことは比較的簡単に出来ると思いますよ。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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