最後のオーディオ要素を最近の<script>要素と比較して再生する

Question

ユーザー（CMS内）が挿入できるjQueryスクリプトがあります。このスクリプトは最後のリンクをmp3ファイル（最後のタグ：最近のタグを基準にしたもの）にHTML5要素に変換し、このオーディオの下に再生ボタンを挿入します。この時点までは、スクリプトはうまくいきましたが、再生が完了しなかったので、ボタンはオーディオファイルを再生しません。 そこに何が起こっていますか？

私のコード（フィドルがhereです）：私は見ることができます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="http://www.freesfx.co.uk/rx2/mp3s/5/16797_1460740933.mp3">SOUND-1</a> 
 
<a href="http://www.freesfx.co.uk/rx2/mp3s/5/16983_1461335348.mp3">SOUND-2</a> 
 

 
<script class="auto-play-button"> 
 
    function LinkToAudio(element) { 
 
    var audioURL = jQuery(element).attr('href'); 
 
    var audioName = jQuery(element).text(); 
 
    jQuery(element).before('<br/>'); 
 
    jQuery(element).after('<br/><audio src="' + audioURL + '" type="audio/mpeg" preload="none"></audio><br/>'); 
 
    } 
 
    //converting last mp3-link (relative to this <script> tag) into HTML5 audio element 
 
    LinkToAudio($('a[href$="mp3"]:last')); 
 
    var audioelement = $('audio:last'); 
 
    // Insert Play Button after last <audio> tag (relative to this <script> tag) 
 
    $('<button id="audio">Play Sound above</button>').insertAfter(audioelement); 
 
    $("body").on("click", "button", audioelement.play()); 
 

 
</script> 
 

 
<a href="http://www.freesfx.co.uk/rx2/mp3s/4/16539_1460655601.mp3">SOUND-3</a>

Answer 1

$("body").on("click", "button", audioelement.play());

まず最初は期待どおりにボタンのハンドラが実行されません - それはしようとします直接呼び出すのですぐにplayメソッドを起動してください。次に、playメソッドをaudio要素で呼び出す必要があり、JQuery要素では呼び出されないため、...audioelement.play is not a functionというエラーが発生します。

このお試しください：

$("body").on("click", "button", function() { audioelement[0].play(); });

編集：オリジナルのポスターの意図は、スクリプトタグがWYSIWG設定のいくつかの並べ替えではスニペットとして再利用できることです、フィドル+を念頭に置いてこれを更新スニペット。

Click to see fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="http://www.freesfx.co.uk/rx2/mp3s/5/16797_1460740933.mp3">SOUND-1</a> 
 
<script> 
 
    // Add buttons and otherwise manipulate the dom 
 
    function LinkToAudio(p_element, p_callback) { 
 
     var audioURL = $(p_element).attr('href'); 
 
     var audioName = $(p_element).text(); 
 
     // Dom for the audio tag 
 
     var audioTag = '<audio src="' + audioURL + '" type="audio/mpeg" preload="none"></audio>'; 
 
     // Dom for the play button 
 
     var audioPlayButton = '<button id="audio">Play Sound above</button>'; 
 
     // Add a audio tag and play button after the element 
 
     $(p_element).after('<br/>' + audioTag + '<br/>' + audioPlayButton + '<br/>'); 
 
\t  // Add the callback to the button 
 
     $(p_element).nextAll('button:first').on('click', p_callback); 
 
    } 
 
    
 
    // Define our button click handler 
 
    function AudioButtonHandler(evt) { 
 
\t  // Once clicked, find the first audio tag located before the button 
 
    \t   var relativeAudioTag = $(evt.target).prevAll('audio:first')[0]; 
 
\t  console.log(evt.target, relativeAudioTag); 
 
     // Play the sound! 
 
     relativeAudioTag.play(); 
 
    } 
 

 
    var thisAudio = $('a[href$="mp3"]:last'); 
 
    LinkToAudio(thisAudio, AudioButtonHandler); 
 
</script> 
 

 
<a href="http://www.freesfx.co.uk/rx2/mp3s/5/16983_1461335348.mp3">SOUND-2</a> 
 
<a href="http://www.freesfx.co.uk/rx2/mp3s/4/16539_1460655601.mp3">SOUND-3</a> 
 
<script> 
 
    // Add buttons and otherwise manipulate the dom 
 
    function LinkToAudio(p_element, p_callback) { 
 
     var audioURL = $(p_element).attr('href'); 
 
     var audioName = $(p_element).text(); 
 
     // Dom for the audio tag 
 
     var audioTag = '<audio src="' + audioURL + '" type="audio/mpeg" preload="none"></audio>'; 
 
     // Dom for the play button 
 
     var audioPlayButton = '<button id="audio">Play Sound above</button>'; 
 
     // Add a audio tag and play button after the element 
 
     $(p_element).after('<br/>' + audioTag + '<br/>' + audioPlayButton + '<br/>'); 
 
\t  // Add the callback to the button 
 
     $(p_element).nextAll('button:first').on('click', p_callback); 
 
    } 
 
    
 
    // Define our button click handler 
 
    function AudioButtonHandler(evt) { 
 
\t  // Once clicked, find the first audio tag located before the button 
 
    \t   var relativeAudioTag = $(evt.target).prevAll('audio:first')[0]; 
 
\t  console.log(evt.target, relativeAudioTag); 
 
     // Play the sound! 
 
     relativeAudioTag.play(); 
 
    } 
 

 
    var thisAudio = $('a[href$="mp3"]:last'); 
 
    LinkToAudio(thisAudio, AudioButtonHandler); 
 
</script>