locked
audio tag in a listView control

    Question

  • HI!

    I,m trying to list some mp3 file using listView control and audio tag.

    Html segment:

    <div id = "listTemplate">
        <div>
            <audio controls data-win-bind = "src: url">error</audio>
        </div>
    </div>
    
    <div id = "musicListView" data-win-control = "WinJS.UI.ListView" 
        data-win-options = "{
            itemTemplate: select('#listTemplate'),
            itemDataSource: musicList.dataSource,
            }">
    </div>

    I can see the musics are listed, but cannot control it. In other word, the buttons audio tag provides are invalid. 

    Thanks.

    Wednesday, November 21, 2012 8:45 AM

Answers

  • 1. Make sure your listview template is marked as "WinJS.Binding.Template"

    <div id="listTemplate" data-win-control="WinJS.Binding.Template">


    2. Since the click event on the listview item is not propagated down to the audio control, u need a click handler on the listview item. U can do that by specifying a oniteminvoked handler on the listview. In my case i expose the handler via a namespace called Audio

    <div id="musicListView" data-win-control="WinJS.UI.ListView" data-win-options="{ oniteminvoked: Audio.clickHandler, itemTemplate: select('#listTemplate'), itemDataSource: Audio.musicList.dataSource}"></div>


    3. Define the clickHandler in your .js file

    WinJS.Utilities.markSupportedForProcessing(clickHandler);
    function clickHandler(eventInfo) {
    
        var listView = document.getElementById("musicListView").winControl;
        var index = eventInfo.detail.itemIndex;
    
        var element = listView.elementFromIndex(index);
        var audioElement = WinJS.Utilities.query("audio", element)[0];
    
        audioElement.play();
    }


    The markSupportedForProcessing is there so we can declaratively set our oniteminvoked event handler in the html. In the click handler we retrieve

    the listview, the index of the item clicked and then we get the actual element from the listview. Next, we select the audio element via the query helper. Then we call the play() method on the audioElement and your music is playing!

    Hope this helps!




    • Marked as answer by Lattimore Friday, November 23, 2012 7:45 AM
    • Edited by M. Dirksma Friday, November 23, 2012 7:47 AM
    Wednesday, November 21, 2012 10:30 AM