2017-12-28 11 views
2

私は符号化に新しいです& new to stackoverflow!私は今のところ私のベルトの下で約30時間のコーディングをしており、私の努力はあなたが「フランケンシュタイン法」と呼ぶかもしれないものです。うまくいけば私はいくつかのアドバイスと私の問題の解決策を得ることができます...htmlやjavascriptのオーディオの自動再生を無効にする

私はウェブサイトを構築しようとしています&私はHTML5、CSSとjavascriptを使用してプレイリストでaudioplayerをコーディングすることができましたページが開くとオーディオが自動的に再生され、このようなことは起こりたくありません。

HTMLやjavascriptでautoplay = "false"やautostart = "false"などのさまざまなスニペットを使用しようとしましたが、何も動作していないようです。助けてください!

参考までに私のコードを添付しました。私は学びたいと思っていますので、フィードバックは大歓迎ですが、言及したように、コーディングが新しく、速くスキルを向上させる必要があります。

ありがとうございます!

// P1.js 
 
function audioPlayer(){ 
 
     var currentSong = 0; 
 
     $("#audioPlayer")[0].src = $("#playlist li a")[0]; 
 
     $("#audioPlayer")[0].play(); 
 
     $("#playlist li a").click(function(e){ 
 
      e.preventDefault(); 
 
      $("#audioPlayer")[0].src = this; 
 
      $("#audioPlayer")[0].play(); 
 
      $("#playlist li").removeClass("current-song"); 
 
      currentSong = $(this).parent().index(); 
 
      $(this).parent().addClass("current-song"); 
 
     }); 
 

 
     $("#audioPlayer")[0].addEventListener("ended", function(){ 
 
      currentSong++; 
 
      if(currentSong == $("#playlist li a").length) 
 
       currentSong = 0; 
 
      $("#playlist li").removeClass("current-song"); 
 
      $("#playlist li:eq("+currentSong+")").addClass("current-song"); 
 
      $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href; 
 
      $("#audioPlayer")[0].play(); 
 
     }); 
 
    } 
 

 
// Inline script 
 

 
// loads the audio player 
 
audioPlayer("P1.js");
.playernh { 
 
    position: absolute; 
 
    left: 400px; 
 
    top: 1050px; 
 
    list-style: none; 
 
    height:75px; 
 
    width:400px; 
 
    background-color: pink; 
 
} 
 
#playlist li a { 
 
    font-family: "Courier New"; 
 
    font-size: 24px; 
 
    background-color: red; 
 
    color:black; 
 
    text-decoration: none; 
 
} 
 
#playlist .current-song a { 
 
    color:yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="playernh"> 
 

 
<audio id="audioPlayer" controls="controls"> 
 
    Sorry, your browser doesn't support html5! 
 
</audio> 
 
<ul id="playlist"> 
 
    <li class="current-song"><a href="Schietwetter - Naked Healer - 01 Naked Healer.mp3">Naked Healer</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 02 Brown Matter.mp3">Brown Matter</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 03 Maos.mp3">Maos</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 04 Schwerlast.mp3">Schwerlast</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 05 Swallow.mp3">Swallow</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 06 Tanzer.mp3">Tanzer</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 07 Edwards War.mp3">Edwards War</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 08 Substanz.mp3">Substanz</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 09 Wolfkopf.mp3">Wolfkopf</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 10 Boni.mp3">Boni</a></li> 
 
    <li><a href="Schietwetter - Naked Healer - 11 Moth.mp3">Moth</a></li> 
 
</ul> 
 
</div>

答えて

1

あなたはすぐにaudioPlayerを呼び出し、audioPlayer ...

function audioPlayer(){ 
    var currentSong = 0; 
    $("#audioPlayer")[0].src = $("#playlist li a")[0]; 
    $("#audioPlayer")[0].play(); 

...すぐに音楽再生を開始します。そこに.src.play行を取り出してください。 (clickハンドラに残してください)

また、audioPlayerは引数をとりません。 Javascriptの実行が開始されると、ブラウザはすでにすべてのスクリプトを1つの長いコード混乱の中に閉じ込めています。その時点では"p1.js"という概念はありません。

+0

これはトリックを行った!上記の2行を削除し、自動再生機能が停止しました。 – nass100

関連する問題