オーディオ自動再生を無効にするオファーオプション

Question

私はラジオプレゼンターで、自分のブロードキャストのmp3ストリームを自分のウェブサイトで自動再生するように設定しました（私は知っています、ただ私をユーモアします） HTML5オーディオタグを使用して、誰かが私のサイトに初めてアクセスしたときに音声が自動再生されるようにします。

ただし、チェックボックスをオフにしない限り、オーディオが再び自動再生されないという結果がチェックボックスに表示されます。

このチェックボックスは、単なるオーディオプレーヤーの下に表示され、「false」から「true」からの自動再生タグを変更する必要があります。

私は自動再生を停止しますプラグインを見てきましたが、ちょうど無差別に自動再生を使用してどのように多くの人々を示すことを行くこれは、オプションを自分自身を提供するために、オンライン任意のコードを見つけることができません。私はそれを使用することを決して夢見ることはないでしょう。

いくつかのクイックリサーチに続いて、次のコードをまとめましたが、私がn00bコーダーとして機能するようにはできません。どこが間違っていて、最も洗練されたソリューションは何ですか？

function check(that){ 
 
\t if(that.value === "disable-autoplay"){ 
 
     if((this).is(':checked')){ 
 
      autoplay="no"('checked'); 
 
\t \t } 
 
\t }else { 
 
\t \t autoplay="autoplay"('unchecked'); 
 
    \t } 
 
}

<audio controls autoplay="true"><source src="stream.mp3" type="audio/mp3"></audio> 
 
<input type="checkbox" name="disable-autoplay" value="disable-autoplay" onchange="check(this)" />

Answer 1

自動再生

MDNから： ブール属性。オーディオファイルのダウンロードが完了するのを待つことなく、オーディオが自動的に再生を開始します。

最初のことはありません（この値が "false"でも！）また、今私はあなたが好みのentirを永続化したいと属性

<input type="checkbox" name="disableAutoplay" id="disableAutoplay" /> 

にイベントハンドラを割り当てていないIDのようないくつかのセレクタ付きのチェックボックスを作成します

<audio id="myAudio" controls> 
    <source src="song.ogg" type="audio/ogg"> 
    <source src="song.mp3" type="audio/mpeg"> 
</audio> 

あなたのHTMLにまったく自動再生を割り当てeサイトでは、ユーザーがサイトをリフレッシュ/ナビゲートしても、クッキーやブラウザーストレージを使用しているため、ユーザーの環境設定を維持する必要があります。 私は

localStorage.setItem('disableAP','yes');   //saving 
disableAutoplay = localStorage.getItem('disableAP');//retriing 

はそれがどのように単純な参照、その単純に良いだろう、ローカルストレージを使用したと思います。

ページが読み込まれるたびに、ユーザー設定が確認されます。 load（）メソッドを更新するために使用される

load()方法：応じてストレージ内の変数以上からチェックボックス

今最も重要な部分が来るのチェックを外す/有効/オーディオのautoplayプロパティを無効にして確認してくださいソースまたは他の設定を変更した後のオーディオ/ビデオ要素。

load（）関数はこのコードの中心です。は、新しく割り当てられた設定でオーディオエレメントを更新します。しかし、実際にページをリフレッシュしたり、HTMLを物理的に編集したりすることなく、本質的に動的マークアップの効果が得られます。

）どのように負荷（参照は（チェックで以下に使用されている）機能

var chkAutoPlay = document.getElementById('disableAutoplay'); 
var myAudio = document.getElementById('myAudio'); 

function check(that){ 
    if (that.checked)    //checkbox is checked 
    { 
     myAudio.autoplay=false; 
     localStorage.setItem('disableAP','yes'); 

    } else {      //checkbox is not checked     
     myAudio.autoplay=true; 
     localStorage.setItem('disableAP','no'); 
     myAudio.load(); 
    } 
} 

は、最終的には、チェックボックス

document.getElementById('disableAutoplay').onchange=check; 

デモのイベントハンドラを割り当てる：https://jsfiddle.net/sanddune/oz0nhv2k/