Question

合金音频UI示例在https://alloyui.com/examples/audio/real-world

中提供

可以通过

实现数据表行的单击

$('#mp3table').on( 'click', 'tbody tr', function () {
  var rowData = table.row( this ).data();

  // can modify the audio player's source here
  ...

  audio.play();
} );

我想将音频放在数据表之外，但无法找到方法。

Answer 1

如果我正确理解了您的问题，则应该可以先在表外声明音频实例，然后根据需要重新使用它。

因此，在您的情况下，单击表行时，可以引用并重复使用相同的音频实例进行音频播放，如下所示：

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

});

您支持的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>

如何将音频放在数据表之外？

1 个答案: