JavaScriptオーディオプレーヤー

私は単純なJavaScript audiotrackコントローラを構築しており、私のコードに何が問題なのか分かりません。私はここで何時間も探していて、仕事をした簡単なコードを見つけました。私は（これはタイプミスやコードの誤りに）多くのことを変更しなければならなかったと私は最終的にこれを得た：JavaScriptオーディオプレーヤー

var TRACKS = [ 
 
    { 
 
     id: 0, 
 
     nom: 'Johnny B. Goode', 
 
     autor: 'Chuck Berry', 
 
     src: 'src/johnnybgoode.mp3', 
 
     any: '1955' 
 
    }, 
 
    { 
 
     id: 1, 
 
     nom: 'For Your Love', 
 
     autor: 'The Yardbirds', 
 
     src: 'src/foryourlove.mp3', 
 
     any: '1965' 
 
    } 
 
]; 
 

 
var songs = 2; 
 

 
var Player = function() { 
 
    "use strict"; 
 
    var currentPlaying, 
 
     trackListPos, 
 
     trackList, 
 
     source, 
 
     audio; 
 
    
 
    
 
    this.getName = function() { 
 
     return currentPlaying.nom; 
 
    }; 
 
    
 
    this.setTrack = function (obj) { 
 
     currentPlaying = obj; 
 
     source.src = obj.src; 
 
     audio.load(); 
 
     audio.play(); 
 
     return this; 
 
    }; 
 
     
 
    
 
    this.setTrackList = function (t) { 
 
     trackList = t; 
 
     trackListPos = 0; 
 
     audio = document.getElementById('myAudio'); 
 
     source = document.getElementById('audioSource'); 
 
     this.setTrack(trackList[trackListPos]); 
 
     return this; 
 
    }; 
 
    
 
    this.play = function() { 
 
     audio.load(); 
 
     audio.play(); 
 
     return this; 
 
    }; 
 
    
 
    this.stop = function() { 
 
     audio.pause(); 
 
     audio.currentTime = 0; 
 
     return this; 
 
    }; 
 
    
 
    this.pause = function() { 
 
     audio.pause(); 
 
    }; 
 

 
    this.next = function() { 
 
     if (currentPlaying.id === (songs - 1)) { 
 
      trackListPos = 0; 
 
     } else { 
 
      trackListPos += 1; 
 
     } 
 
     this.setTrack(trackList[trackListPos]); 
 
    }; 
 
}; 
 

 
//Initialize 
 
var reprod = new Player(); 
 
reprod.setTrackList(TRACKS).play(); 
 

 
function play() { 
 
\t "use strict"; 
 
\t reprod.play(); 
 
\t document.getElementById("Play").innerHTML = "Pause"; 
 
} 
 

 
function seguent() { 
 
    "use strict"; 
 
\t reprod.next(); 
 
    document.getElementById("titol").innerHTML = "<b>T&iacute;tol:</b>"; 
 
}

<audio id="myAudio" controls="controls"> 
 
    <source id="audioSource" src=""> 
 
    Your browser does not support the audio format. 
 
</audio> 
 
    <nav class="navegador" id="sidebar"> 
 
     <div class="playerwrapper"> 
 
      <div class="player"> 
 
       <p id="titol"></p> 
 
       <p id="autor"></p> 
 
       <p id="any"></p> 
 
       <button type="button" onclick="seguent()">Següent</button> 
 
       <button id="Play" type="button" onclick="play()">Play</button> 
 
      </div> 
 
     </div> 
 
    </nav>

機能の再生をトリガーするカップルのボタンがあるのですあなたが見ることができるように

（）とseguent（）（次に意味する）。そして、彼らはうまくいかないようです。再生ボタンのテキストを変更するinnerHTMLは機能しませんが、 "reprod.play（）;"を削除すると、ボタンの内容を変更します。

私のコードで何が起こっているのか誰かが説明できますか？

（ポストが面倒であれば申し訳ありませんが、それはここで私の第2のポストだと私はフォーマットを知らない）私は、コンソールを使用することができます知らせるため

おかげで、スローエラーは以下のとおりです。

Uncaught TypeError: Cannot read property 'load' of null 
Uncaught TypeError: Cannot set property 'src' of null

出典

2017-11-22 Ferran Capallera Guirado

それは）（ 'reprod.playを呼び出す' JavaScriptエラーを投げている可能性がありますが。コンソールにエラーメッセージが表示されているかどうかを確認し、質問があれば共有します。 – samanime

未知の型エラー：ヌルのプロパティ 'src'を設定できませんキャッチしない型エラー：nullのプロパティ 'load'を読み取れません –

どの行ですか？それはどのようなコード行を参照していますか？ – samanime

DOMを参照すると、setTrackList(t)が参照している要素のようです。 HTMLでこのスクリプトをインポートするために宣言した要素（<script>タグ）は、あなたのコンテンツに<body>の前にあると思います。 setTrackList(t)を呼び出す前にDOMコンテンツがロードされていることを確認する必要があります。したがって、onloadイベントをバインドして呼び出すことができます。そうしないと、この関数は要素を見つけられません。クラス（function Player()）を構築機能のコンテキストを変数が削除されているので、自分自身を呼び出した直後に終了します。

var reprod = new Player(); 
document.addEventListener("load", function() { 
    reprod.setTrackList(TRACKS).play(); 
}); 

function play() { 
    "use strict"; 
    reprod.play(); 
    document.getElementById("Play").innerHTML = "Pause"; 
} 

function seguent() { 
    "use strict"; 
    reprod.next(); 
    document.getElementById("titol").innerHTML = "<b>T&iacute;tol:</b>"; 
}

EDIT：は、たぶん私はあなたの問題を理解

これを試してみてください。したがって、thisコンテキストで変数を宣言してみてください。

this.audio = yourValue;

の代わりに：

var audio = yourValue;

EDIT：はたぶん今ではtry this fiddle、うまく機能しています。なぜなら、トラックの欠落の誤りを除き

、それが働いているようです。ここ
はフィドルのコードです：

var TRACKS = [ { id: 0, nom: 'Johnny B. Goode', autor: 'Chuck Berry', src: 'src/johnnybgoode.mp3', any: '1955' }, { id: 1, nom: 'For Your Love', autor: 'The Yardbirds', src: 'src/foryourlove.mp3', any: '1965' } ]; var songs = 2; var Player = function() { this.getName = function() { return this.currentPlaying.nom; }; this.setTrack = function (obj) { this.currentPlaying = obj; this.source.src = obj.src; this.audio.load(); this.audio.play(); return this; }; this.setTrackList = function (t) { this.trackList = t; this.trackListPos = 0; this.audio = document.getElementById('myAudio'); this.source = document.getElementById('audioSource'); this.setTrack(this.trackList[this.trackListPos]); return this; }; this.play = function() { //this.audio.load(); this.audio.play(); return this; }; this.stop = function() { this.audio.pause(); this.audio.currentTime = 0; return this; }; this.pause = function() { this.audio.pause(); }; this.next = function() { if (this.currentPlaying.id === (songs - 1)) { this.trackListPos = 0; } else { this.trackListPos += 1; } this.setTrack(this.trackList[this.trackListPos]); }; }; //Initialize var reprod = new Player(); if (document.getElementById("myAudio")) reprod.setTrackList(TRACKS).play(); else window.addEventListener('load', function() { reprod.setTrackList(TRACKS).play(); }); window.play = function() { "use strict"; reprod.play(); document.getElementById("Play").innerHTML = "Pause"; } window.seguent = function() { "use strict"; reprod.next(); document.getElementById("titol").innerHTML = "<b>Títol:</b>"; }

そして、ここではHTMLです：

<audio id="myAudio" controls="controls"> <source id="audioSource" src=""> Your browser does not support the audio format. </audio> <nav class="navegador" id="sidebar"> <div class="playerwrapper"> <div class="player"> <p id="titol"></p> <p id="autor"></p> <p id="any"></p> <button type="button" onclick="window.seguent()">Següent</button> <button id="Play" type="button" onclick="window.play()">Play</button> </div> </div> </nav>

出典

2017-11-22 17:37:31

私もこれについて考えましたが、どちらもうまくいきません。 playlist.js：60 Uncaught TypeError：未定義のプロパティ 'load'を読み込めません Player.play（playlist.js：60）再生中（playlist.js：100） at HTMLButtonElement.onclick（index.html：18）） –

@Ferran Capallera Guirado、私の答えの更新を参照してください：おそらくあなたの問題は、変数のコンテキストに依存します。 –

これはうまくいきません。しかし、あなたは正しいかもしれません！それらをグローバル変数として宣言する必要がありますか？ –

JavaScriptオーディオプレーヤー

答えて

関連する問題