Как разместить аудио за пределами datatable?

1

Пример аудио-интерфейса с использованием сплава представлен в 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 и не могу найти способ сделать это.

Теги:

1 ответ

3
Лучший ответ

Если я правильно понял ваш вопрос, вы должны сначала объявить свой аудиоэкземпляр за пределами своей таблицы, а затем повторно использовать его по мере необходимости.

Таким образом, в вашем случае, когда нажаты строки таблицы, вы можете ссылаться и повторно использовать один и тот же звуковой экземпляр для воспроизведения звука, как показано ниже:

// 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>
  • 0
    Это мило с вашей стороны, Дакре Денни. Можете ли вы помочь мне с HTML-фрагментом кода с одним примером mp3-ссылки, чтобы я взял его оттуда ... Пожалуйста, помогите мне.
  • 0
    Привет, Катир, пожалуйста. Я расширил и обновил ответ, чтобы показать вам, как вы могли бы предоставить HTML для этой работы. Пожалуйста, дайте мне знать, если у вас есть другие вопросы
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню