Question

所以要清楚我把所有音频文件都放在与html文件相同的文件夹中，我让它播放了一首歌，但我需要用户能够从列表中选择一首歌我相信我的问题是什么使用我的音频标签中的源，是的我知道我正在使用全局变量。是的我也知道用html5内置的音频控件，我想制作我自己的播放和暂停按钮，它们可以工作，但就像我说我无法改变它所以用户可以从列表中选择一首歌

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Music Player</title>
    <style>
        body {
            background-color: #D1D1D1;
        }

        #title {
            text-align: center;
        }

        fieldset {
            display: block;
            border: 4px solid black;
            background-color: #22F4ED;
            margin-left: auto;
            margin-right: auto;
            width: 500px;
        }

        #div1 {
            text-align: center;
        }

        table {
            text-align: center;
            width: 500px;
        }
    </style>
    <script>
        var selSong;
        function check(song) {
            selSong;
            var sng = document.getElementById(song);
            var dropDownSel = sng.options[sng.selectedIndex].value;
            if (dropDownSel == "selectsong") {
                alert("Please select a song");
            }
            if (dropDownSel == "AtAGeorgiaCamp-Meeting") {
                alert("You selected At a Georgia Camp Meeting");
                selSong = '"AtAGeorgiaCamp-Meeting.mp3"';
            }
            if (dropDownSel == "GoodByeBroadwayHelloFrance") {
                alert("You selected Good Bye Broadway, Hello France");
                selSong = '"GoodByeBroadwayHelloFrance.mp3"';
            }
            if (dropDownSel == "HowYaGonnaKeepThemDownOnTheFarmAfterTheyveSeenParee") {
                alert("You selected How Ya Gonna Keep Them Down On The Farm After They've Seen Paree");
                selSong = '"HowYaGonnaKeepThemDownOnTheFarmAfterTheyveSeenParee.mp3"';
            }
            if (dropDownSel == "K-K-K-Katy") {
                alert("You selected K-K-K-Katy");
                selSong = '"K-K-K-Katy.mp3"';
            }
            if (dropDownSel == "OhHowIHateToGetUpInTheMorning") {
                alert("You selected Oh How I Hate To Get Up In The Morning");
                selSong = '"OhHowIHateToGetUpInTheMorning.mp3"';
            }
            if (dropDownSel == "PackUpYourTroublesInYourOldKitBag") {
                alert("You selected Pack Up Your Troubles In Your Old Kit Bag");
                selSong = '"PackUpYourTroublesInYourOldKitBag.mp3"';
            }
            if (dropDownSel == "TwelfthStreetRag") {
                alert("You selected Twelfth Street Rag");
                selSong = '"TwelfthStreetRag.mp3"';
            }
            if (dropDownSel == "YesWeHaveNoBananas") {
                alert("You selected Yes We Have No Bananas");
                selSong = '"YesWeHaveNoBananas.mp3"';
                alert(selSong);
            }
        }
    </script>
</head>
<body>
    <h1 id="title">Music Player</h1>
    <fieldset>
        <table>
            <br>
            <tr>
                <td>
                    <button type="button" onclick="playAudio('selectedSong');">Play</button>
                </td>
                <td>
                    <button type="button" onclick="pauseAudio('selectedSong');">Pause</button>
                </td>
            </tr>
        </table>
        <div id="div1">
            Pick a song:
            <select id="song" onchange="check('song');">
                <option value="selectsong">Select a Song</option>
                <option value="AtAGeorgiaCamp-Meeting">
                    At a Georgia Camp
                    Meeting
                </option>
                <option value="GoodByeBroadwayHelloFrance">
                    Good Bye Broadway, Hello
                    France
                </option>
                <option value="HowYaGonnaKeepThemDownOnTheFarmAfterTheyveSeenParee">
                    How
                    Ya Gonna Keep Them Down On The Farm After They've Seen Paree
                </option>
                <option value="K-K-K-Katy">K-K-K-Katy</option>
                <option value="OhHowIHateToGetUpInTheMorning">
                    Oh How I Hate To Get Up
                    In The Morning
                </option>
                <option value="PackUpYourTroublesInYourOldKitBag">
                    Pack Up Your Troubles
                    In Your Old Kit Bag
                </option>
                <option value="TwelfthStreetRag">Twelfth Street Rag</option>
                <option value="YesWeHaveNoBananas">Yes We Have No Bananas</option>
            </select>
        </div>
    </fieldset>
    <audio id="selectedSong">
        <source src=selSong type="audio/mp3">
    </audio>
    <script>
        function playAudio(id) {
            document.getElementById(id).play();
        }
        function pauseAudio(id) {
            document.getElementById(id).pause();
        }
    </script>
</body>
</html>

Answer 1

我认为原因是因为只有IE可以用html5播放mp3歌曲，尝试将格式mp3转换为ogg并执行此操作，mp3适用于IE和ogg适用于chrome，opera，safari，mozilla等，保持也是mp3格式。

<source src=selSong type="audio/mp3">
<source src=selSong type="audio/ogg">

此外，你需要在所有歌曲中添加（例如）

selSong = '"TwelfthStreetRag.ogg"';

带有歌曲的Javascript和HTML5音频播放器可供选择

1 个答案: