Madamadam Madamadam - 5 months ago 9
Javascript Question

Play last audio element relative to recent <script> element

I've got a jQuery script which can be inserted by a user (inside a CMS). This script converts the last link to an mp3-file (last means: relative to the recent tag) to a HTML5 element and inserts a play button below this audio. Untill this point, the script works well, but I didn't get the playing done, the button doesn't play the audio file.
What's going wrong there?

My code (a fiddle is 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

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

First thing I can see is your button handler will not run as expected - it will try to fire the play method right away since you are invoking it directly. Second, the play method needs to be invoked on the audio element, and not on the JQuery element, hence the ...audioelement.play is not a function error.

Try this:

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

Edit: Original poster's intent is to have the script tag be reusable as a snippet in some sort of WYSIWG setting, fiddle + snippet updated with this in mind.

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>