javascript - 播放相对于最近的 <script> 元素的最后一个音频元素

Question

我有一个 jQuery 脚本，可以由用户插入(在 CMS 内)。该脚本将最后一个 mp3 文件链接(最后意味着:相对于最近的标签)转换为 HTML5 元素，并在此音频下方插入一个播放按钮。到目前为止，脚本运行良好，但我没有完成播放，按钮不播放音频文件。出了什么问题？

我的代码( fiddle 是 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("点击", "按钮", audioelement.play());

我看到的第一件事是您的按钮处理程序不会按预期运行 - 它会尝试立即触发 play 方法，因为您直接调用它。其次，需要在音频元素上调用 play 方法，而不是在 JQuery 元素上调用，因此 ...audioelement.play is not a function 错误。

试试这个:

$("body").on("点击", "按钮", function() {
音频元素[0].play();
});

编辑:原始海报的目的是让脚本标签可以在某种 WYSIWG 设置中作为片段重复使用， fiddle + 片段更新时考虑到了这一点。

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/>');
	    // Add the callback to the button
        $(p_element).nextAll('button:first').on('click', p_callback);
    }
  
    // Define our button click handler
    function AudioButtonHandler(evt) {
	    // Once clicked, find the first audio tag located before the button
  	        var relativeAudioTag = $(evt.target).prevAll('audio:first')[0];
	    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/>');
	    // Add the callback to the button
        $(p_element).nextAll('button:first').on('click', p_callback);
    }
  
    // Define our button click handler
    function AudioButtonHandler(evt) {
	    // Once clicked, find the first audio tag located before the button
  	        var relativeAudioTag = $(evt.target).prevAll('audio:first')[0];
	    console.log(evt.target, relativeAudioTag);
        // Play the sound!
        relativeAudioTag.play();
    }

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