如何更新 Wavesurfer 与 p: 数据表选定的元素 显示/隐藏原文

How update Wavesurfer with p:datatable selected element

创建时间:2017-10-10 01:24:37 标签: ajax primefaces wavesurfer.js
0
投票
0
回答
9
查看

我使用 p: 数据表列出一些歌曲, 并希望用所选记录更新 Wavesurfer 元素.

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

            <p:dataTable id="playList" widgetVar="playList"
                         var="mySong" value="#{selectionSong.playList}" 
                         selectionMode="single" selection="#{selectionSong.selectedSong}" rowKey="#{mySong.name}"
                         scrollable="true" 
                         sortMode="multiple">

            <p:ajax event="rowSelect" listener="#{selectionSong.onRowSelect}" onsuccess="wavesurfer.load('myProject/Faces/javax.faces.resource/Sounds/#{mySong.file}')" update=":playListForm:msg"/>
            <p:ajax event="rowUnselect" listener="#{selectionSong.onRowUnselect}" update=":playListForm:msg"/>
            <p:ajax event="filter" onsuccess="wavesurfer.load('#{mySong.file}');" />

            <p:column headerText="Title" sortBy="#{mySong.name}" filterBy="#{mySong.name}" filterMatchMode="contains">
                <h:outputText value="#{mySong.name}" />
            </p:column>

            <p:column headerText="File" >
                <h:outputText value="#{mySong.file}" />
            </p:column>
            </p:dataTable>
            <div id="waveform" class="waveform">
                <p:ajax event="dblclick" onsuccess="wavesurfer.playPause()" />
            </div>
        </h:form>

        <div style="text-align: center">
            <button class="btn btn-primary" onclick="wavesurfer.playPause()">
                <i class="glyphicon glyphicon-play"></i>
                Play
            </button>
        </div>

        <script type="text/javascript">
            wavesurfer = WaveSurfer.create({
                container: '#waveform',
                backend: 'MediaElement',
                mediaType: 'audio',
                normalize: true,
                barWidth: 3,
            });
        </script>

在资源/声音目录中有 bean 的

public class SongService {

private String name;
private String file;

public SongService(Integer numSong) {
    this.name = "Song" + numSong;
    this.file = "0"+numSong+".mp3";
}

@ManagedBean
@ViewScoped
public class SelectionSong implements Serializable{

private List<SongService> playList;
private SongService selectedSong;

@PostConstruct
public void init() {
    playList = new ArrayList<>();
    playList.add(new SongService(1));
    playList.add(new SongService(2));
    playList.add(new SongService(3));
}

添加 Getter & Setter 和 mp3 文件

当我在数据表中选择一行时, 正确选择了行, 但 Wavesurfer 元素不是用 t 加载的他使用 bean 值进行归档。加载是正确的, 如果我直接把歌曲文件名。 是否有任何更新文件名和加载我选择的歌曲的想法? 如果你需要更多的信息, 请告诉我。 PrimeFaces 6.1/WaveSurfer 1.2.3/JSF 2.2 感谢您的帮助

显示/隐藏原文

该问题尚无回答