播放与最近的<script>元素相关的最后一个音频元素

Question

我有一个jQuery脚本，它可以由用户插入(在CMS中)。这个脚本将最后一个链接转换成一个mp3文件(最后的意思是:相对于最近的标记)到一个HTML5元素，并在这个音频下面插入一个播放按钮。直到这一点，脚本运行良好，但我没有完成播放，按钮没有播放音频文件。哪里出什么问题了？

我的代码(小提琴是这里)：

​

<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(); });

编辑:原始海报的意图是让脚本标记在某种WYSIWG设置中作为一个片段可重用，并在此基础上对其进行更新。

点击查看小提琴

​

<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>

​