Alloy Audio UI example is provided in https://alloyui.com/examples/audio/real-world
Data table row click can be achieved via
$('#mp3table').on( 'click', 'tbody tr', function () { var rowData = table.row( this ).data(); // can modify the audio player's source here ... audio.play(); } ); I would like to place the audio outside of the datatable and cannot find a way to do it.
1 Answers
Answers 1
If I understand your question correctly, you should be able to first declare your audio instance outside of your table, and then re-use it as needed.
So in your case, when table rows are clicked, you can reference and re-use the same audio instance for audio playback, as follows:
// Declare your audio instance, outside of the table var audio = new Y.Audio({ boundingBox: '#yourAudioElement' }).render(); $('#mp3table').on( 'click', 'tbody tr a', function () { // Extract the audio url from this button. var audioUrl = $(this).data('url'); // Pause the audio instance if it's currently playing audio.pause(); // Update the url of the audio instance audio.set('url', audioUrl); // Load the new data from the new audioUrl audio.load(); // Play the new sound via the same audio object audio.play(); }); And your supporting HTML could look something like this:
<div id="yourAudioElement"></div> <table id="mp3table"> <tbody> <tr> <td> <a href="#" data-url="https://alloyui.com/audio/zelda.mp3">Click to hear zelda</a> </td> </tr> <tr> <td> <a href="#" data-url="http://www.noiseaddicts.com/samples_1w72b820/4929.mp3">Click to hear bird</a> </td> </tr> </tbody> </table> 
0 comments:
Post a Comment