Пример аудио-интерфейса с использованием сплава представлен в https://alloyui.com/examples/audio/real-world
Щелчок строки таблицы данных может быть достигнут через
$('#mp3table').on( 'click', 'tbody tr', function () {
var rowData = table.row( this ).data();
// can modify the audio player source here
...
audio.play();
} );
Я хотел бы разместить аудио за пределами datatable и не могу найти способ сделать это.
Если я правильно понял ваш вопрос, вы должны сначала объявить свой аудиоэкземпляр за пределами своей таблицы, а затем повторно использовать его по мере необходимости.
Таким образом, в вашем случае, когда нажаты строки таблицы, вы можете ссылаться и повторно использовать один и тот же звуковой экземпляр для воспроизведения звука, как показано ниже:
// 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 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();
});
И ваш поддерживающий HTML может выглядеть примерно так:
<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>