Question

我在stackoverflow上看了一下这个问题的答案，但我能找到的是关于制作自定义播放/停止/暂停按钮的信息。

我希望能够使用HTML5音频在PhoneGap应用程序中显示音频滑块控件（希望使用很少或不使用JS，因为它确实会增加处理器并降低应用程序性能）。

当我在iOS模拟器或手机上测试时，它只显示一个带有播放图标的空白矩形（可以播放音频）。也许这是PhoneGap的不足之处？我只是在寻找一种简单的方法来让完整的音频控件像在网站上一样显示。

Answer 1

我还没有真正找到我希望的理想解决方案，但这是...... 在使用JQuery加载一些自定义函数和使用JQM框架对单选按钮进行分组时，找到了一个很好的提示：

更新：我已经更新了代码，以便它检测到它点击的按钮ID（每个单选按钮都有唯一的ID）并将其保存为变量，然后运行'if else'语句并插入音频标签动态地输入div。我将更新以下代码：

<script type="text/javascript">
    $(document).ready(function(){
        $(".audioPlay").click(function(){
            var audioTag = this.id;
            var loader = document.getElementById('audioPlayer');
            if (audioTag=='radio-choice-h-1a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/cow.wav"></audio>';
            } else if(audioTag=='radio-choice-h-2a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/pig.wav"></audio>';
            } else if(audioTag=='radio-choice-h-3a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/sheep.wav"></audio>';
            } else if(audioTag=='radio-choice-h-4a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/lion.wav"></audio>';
            } else if(audioTag=='radio-choice-h-5a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/train.wav"></audio>';
            } else if(audioTag=='radio-choice-h-6a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/waves.wav"></audio>';
            } else if(audioTag=='radio-choice-h-7a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/truck.wav"></audio>';
            } else if(audioTag=='radio-choice-h-8a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/laughing.wav"></audio>';
            } else if(audioTag=='radio-choice-h-9a'){
                loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/birds.wav"></audio>';
            } else {
               loader.innerHTML = '<audio id="audio-player" name="audio-player" src="audio/dog.wav"></audio>'; 
            }
            $("#audio-player")[0].play();
            $("#message").text("Music started");
        })


        $(".audioPause").click(function(){
            $("#audio-player")[0].pause();
            $("#message").text("Music paused");
        })

        $(".audioStop").click(function(){
            $("#audio-player")[0].pause();
            $("#audio-player")[0].currentTime = 0;
            $("#message").text("Music Stopped");
        })
    })
</script>

我还没有更新其他控制按钮的代码。我承认我的代码非常混乱和冗长。我确实尝试过使用switch / case语句，但我无法使用它。对于这段代码肯定有一个更清晰的方法，但我现在非常致力于让它正常工作，已经做了足够长的时间！

这是HTML：

<div id="audioPlayer"></div>
    <form>
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Cow Sound Controls</legend>
        <input type="radio" class="audioPlay" name="cow-sound" id="radio-choice-h-1a" value="">
        <label for="radio-choice-h-1a">Play</label>
        <input type="radio" class="audioPause"  name="cow-sound" id="radio-choice-h-1b" value="">
        <label for="radio-choice-h-1b">Pause</label>
        <input type="radio" class="audioStop" id="radio-choice-h-1c" value="">
        <label for="radio-choice-h-1c">Stop</label>
    </fieldset>
    </form>

    <form>
    <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Pig Sound Controls</legend>
        <input type="radio" name="pig-sound" class="audioPlay" id="radio-choice-h-2a" value="">
        <label for="radio-choice-h-2a">Play</label>
        <input type="radio" class="audioPause" name="pig-sound" id="radio-choice-h-2b" value="">
        <label for="radio-choice-h-2b">Pause</label>
        <input type="radio" class="audioStop" name="pig-sound" id="radio-choice-h-2c" value="">
        <label for="radio-choice-h-2c">Stop</label>
    </fieldset>
    </form>

    <form>
    <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Sheep Sound Controls</legend>
        <input type="radio" name="sheep-sound" class="audioPlay" id="radio-choice-h-3a" value="">
        <label for="radio-choice-h-3a">Play</label>
        <input type="radio" class="audioPause" name="sheep-sound"  id="radio-choice-h-3b" value="">
        <label for="radio-choice-h-3b">Pause</label>
        <input type="radio" class="audioStop" name="sheep-sound"  id="radio-choice-h-3c" value="">
        <label for="radio-choice-h-3c">Stop</label>
    </fieldset>
    </form>

唯一的问题是它一直将第一个标记定位在堆栈之外。当我使用不同的控制组按钮时，是否有可能快速简便地让音频ID＃audio-player被动态替换，以便我可以定位不同的音频标签？

或者更好的是，使用innerHTML将不同的wav文件src写入音频标签？将它们堆叠成一个数组并使用一组case语句？ - 我在解决方案上采取了这种方式，但我还没有想过使用数组来输出innerHTML。不确定它是否真的值得......

在iOS上使用PhoneGap显示HTML5音频控件

1 个答案: