动态加载文件到waveurfer插件

时间:2017-11-09 02:26:47

标签: javascript html wavesurfer.js

您好我想加载音频文件以在浏览器上显示数字信号。我正在使用wavesurfer.js来显示数字信号。有人可以帮我显示动态加载的音频文件的数字信号。如何修改我的代码以便能够读取系统选择的音频并为其显示数字信号?

javacript:

        input.onchange = function(){
                                    var sound = document.getElementById('sound');
                                    var reader = new FileReader();
                                    reader.onload = function(e) {
                                    sound.src = this.result;
                                    sound.controls = true;
                                    sound.display();
                                    // sound.play(); autoplay feature!!
                                    };
                                    reader.readAsDataURL(this.files[0]);
                                }
     var buttons = {
                        play: document.getElementById("btn-play"),
                        pause: document.getElementById("btn-pause"),
                        stop: document.getElementById("btn-stop")
                    };

                    // Create an instance of wave surfer with its configuration
                    var wavesurfer = WaveSurfer.create({
                        container: '#audio-spectrum',
                        progressColor: "#03a9f4",
                        container: document.querySelector('#audio-spectrum'),
                        backend: 'MediaElement'
                    });

                    // Handle Play button
                    buttons.play.addEventListener("click", function(){
                        wavesurfer.play();

                        // Enable/Disable respectively buttons
                        buttons.stop.disabled = false;
                        buttons.pause.disabled = false;
                        buttons.play.disabled = true;
                    }, false);

 wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

0 个答案:

没有答案