如何使用按钮播放和暂停音频?

时间:2015-06-06 12:09:12

标签: javascript php audio html5-audio web-audio

如何在JavaScript中播放和暂停音频源节点的单个按钮(index.php中将显示按钮)?

所以基本上你有一个播放音频的按钮,当再次点击时,它会暂停歌曲...... 编辑:index.php

<!DOCTYPE html>
<html>
 <head>
    <meta name="description" content="HTML5 Audio Spectrum Visualizer">
    <title>HTML5 Audio API showcase | Audio visualizer</title>
    <link type="text/css" rel="stylesheet" href="style/style.css">
 </head>
 <body>
    <div id="wrapper">
        <div id="fileWrapper" class="file_wrapper">
            <div id="info">
                HTML5 Audio API showcase | An Audio Viusalizer
            </div>
            <label for="uploadedFile">Drag&drop or select a file to play:  
</label>
            <input type="file" id="uploadedFile"></input>
        </div>
        <div id="visualizer_wrapper">
            <canvas id='canvas' width="800" height="350"></canvas>
        </div>
    </div>
    <footer>
        <small></small>
    </footer>
    <script type="text/javascript" src="js/html5_audio_visualizer.js">    
</script>
</body>
</html>

以下是JavaScript代码的一部分:

window.onload = function() {
    new Visualizer().ini();
};
var Visualizer = function() {
    this.file = null; //the current file
    this.fileName = null; //the current file name
    this.audioContext = null;
    this.source = null; //the audio source
    this.info = document.getElementById('info').innerHTML; //this used to 
    upgrade the UI information
    this.infoUpdateId = null; //to sotore the setTimeout ID and clear the 
    interval
    this.animationId = null;
    this.status = 0; //flag for sound is playing 1 or stopped 0
    this.forceStop = false;
    this.allCapsReachBottom = false;
}
Visualizer.prototype = {
    ini: function() {
        this._prepareAPI();
        this._addEventListner();
    },
    _prepareAPI: function() {
        //fix browser vender for AudioContext and requestAnimationFrame
        window.AudioContext = window.AudioContext || window.webkitAudioContext     
        || window.mozAudioContext || window.msAudioContext;
        window.requestAnimationFrame = window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||     
        window.msRequestAnimationFrame;
        window.cancelAnimationFrame = window.cancelAnimationFrame || 
        window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || 
        window.msCancelAnimationFrame;
        try {
            this.audioContext = new AudioContext();
        } catch (e) {
            this._updateInfo('!Your browser does not support AudioContext', 
        false);
            console.log(e);
        }
    },
    _addEventListner: function() {
        var that = this,
            audioInput = document.getElementById('uploadedFile'),
            dropContainer = document.getElementsByTagName("canvas")[0];
        //listen the file upload
        audioInput.onchange = function() {
            if (that.audioContext===null) {return;};

            //the if statement fixes the file selction cancle, because the 
        onchange will trigger even the file selection been canceled
            if (audioInput.files.length !== 0) {
                //only process the first file
                that.file = audioInput.files[0];
                that.fileName = that.file.name;
                if (that.status === 1) {
                    //the sound is still playing but we upload another file, so 
        set the forceStop flag to true
                    that.forceStop = true;
                };
                document.getElementById('fileWrapper').style.opacity = 1;
                that._updateInfo('Uploading', true);
                //once the file is ready,start the visualizer
                that._start();
            };
        };
        //listen the drag & drop
        dropContainer.addEventListener("dragenter", function() {
            document.getElementById('fileWrapper').style.opacity = 1;
            that._updateInfo('Drop it on the page', true);
        }, false);
        dropContainer.addEventListener("dragover", function(e) {
            e.stopPropagation();
            e.preventDefault();
            //set the drop mode
            e.dataTransfer.dropEffect = 'copy';
        }, false);
        dropContainer.addEventListener("dragleave", function() {
            document.getElementById('fileWrapper').style.opacity = 0.2;
            that._updateInfo(that.info, false);
        }, false);
        dropContainer.addEventListener("drop", function(e) {
            e.stopPropagation();
            e.preventDefault();
            if (that.audioContext===null) {return;};
            document.getElementById('fileWrapper').style.opacity = 1;
            that._updateInfo('Uploading', true);
            //get the dropped file
            that.file = e.dataTransfer.files[0];
            if (that.status === 1) {
                document.getElementById('fileWrapper').style.opacity = 1;
                that.forceStop = true;
            };
            that.fileName = that.file.name;
            //once the file is ready,start the visualizer
            that._start();
        }, false);
    },
    _start: function() {
        //read and decode the file into audio array buffer 
            var that = this,
                file = this.file,
                fr = new FileReader();
           fr.onload = function(e) {
                var fileResult = e.target.result;
                var audioContext = that.audioContext;
                if (audioContext === null) {
                    return;
                };
                that._updateInfo('Decoding the audio', true);
                audioContext.decodeAudioData(fileResult, function(buffer) {
                that._updateInfo('Decode succussfully,start the visualizer', 
                true);
                    that._visualize(audioContext, buffer);
                }, function(e) {
                  that._updateInfo('!Fail to decode the file', false);
                    console.log(e);
                });
            };
            fr.onerror = function(e) {
                that._updateInfo('!Fail to read the file', false);
                console.log(e);
            };
            //assign the file to the reader
            this._updateInfo('Starting read the file', true);
            fr.readAsArrayBuffer(file);
        },
        _visualize: function(audioContext, buffer) {
            var audioBufferSouceNode = audioContext.createBufferSource(),
                analyser = audioContext.createAnalyser(),
                that = this;
            //connect the source to the analyser
            audioBufferSouceNode.connect(analyser);
            //connect the analyser to the destination(the speaker), or we won't             
            hear the sound
            analyser.connect(audioContext.destination);
            //then assign the buffer to the buffer source node
            audioBufferSouceNode.buffer = buffer;
            //play the source
            if (!audioBufferSouceNode.start) {
            audioBufferSouceNode.start = audioBufferSouceNode.noteOn //in old 
            browsers use noteOn method
            audioBufferSouceNode.stop = audioBufferSouceNode.noteOff //in old
            browsers use noteOn method
            };
            //stop the previous sound if any
            if (this.animationId !== null) {
                cancelAnimationFrame(this.animationId);
            }
            if (this.source !== null) {
                this.source.stop(0);
            }
            audioBufferSouceNode.start(0);
            this.status = 1;
            this.source = audioBufferSouceNode;
            audioBufferSouceNode.onended = function() {
                that._audioEnd(that);
            };
            this._updateInfo('Playing ' + this.fileName, false);
            this.info = 'Playing ' + this.fileName;
            document.getElementById('fileWrapper').style.opacity = 0.2;
            this._drawSpectrum(analyser);
        },
        ...

我该怎么做呢?还可以创建基本音量滑块吗?

0 个答案:

没有答案