最後音頻元素相對播放最近<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方法需要音頻元素上被調用，而不是JQuery的元件，因此...audioelement.play is not a function誤差上。

試試這個：

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

編輯：樓主的意圖是讓script標籤可重複使用在某種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>