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

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。不确定是否真的值得...