音频播放器源码

html
<html>

<head>
    <meta charset="utf8">
    <title>本地音频播放</title>
    <script>
        function changePlaybackRate() {
            var rate = document.getElementById("playbackRate").value;
            document.getElementById("audio-player").playbackRate = rate;
        }
        function playAudio() {
            document.getElementById("audio-player").src = URL.createObjectURL(document.getElementById("audio-file").files[0]);
        }
        function changeAudioWidgetHeight() {
            var height = document.getElementById("input_audio_widget_height").value;
            document.getElementById("audio-player").style.height = height + "em";

        }
        function changeAudioWidgetWidth() {
            var width = document.getElementById("input_audio_widget_width").value;
            document.getElementById("audio-player").style.width = width + "em";

        }
    </script>
</head>

<body>
    <label for="audio-file">选择文件：</label>
    <input id="audio-file" type="file" />
    <input type="button" onclick="playAudio()" value="确认" />
    <hr />
    <audio id="audio-player" controls="controls" style="height: 5em; width: 30em;"></audio>
    <br />
    <label for="playbackRate">倍速:</label><input id="playbackRate" type="number" placeholder="1.0" /><input value="调整倍速"
        type="button" onclick="changePlaybackRate()" /><br/>
    <label for="input_audio_widget_height">控制器高度</label><input id="input_audio_widget_height" type="number"
        placeholder="5" /><input value="调整高度" type="button" onclick="changeAudioWidgetHeight()" /><br/>
    <label for="input_audio_widget_width">控制器宽度</label><input id="input_audio_widget_width" type="number"
        placeholder="30" /><input value="调整宽度" type="button" onclick="changeAudioWidgetWidth()" /><br/>
</body>

</html>
音频播放器源码 ​

音频播放器源码
