第196行: |
第196行: |
| | | |
| (function (){ | | (function (){ |
− | var audio = document.getElementById('myAudio'); | + | var context = new (window.AudioContext || window.webkitAudioContext)(); |
− | var playButton = document.getElementById('playButton'); | + | var source; |
| + | var isPlaying = false; |
| | | |
− | playButton.addEventListener('click', function() { | + | function loadAudio(url, callback) { |
− | if (audio.paused) { | + | var request = new XMLHttpRequest(); |
− | audio.play(); | + | request.open('GET', url, true); |
− | playButton.innerHTML = 'Pause'; | + | request.responseType = 'arraybuffer'; |
| + | |
| + | request.onload = function() { |
| + | context.decodeAudioData(request.response, function(buffer) { |
| + | callback(buffer); |
| + | }); |
| + | }; |
| + | |
| + | request.send(); |
| + | } |
| + | |
| + | function play() { |
| + | source = context.createBufferSource(); |
| + | source.buffer = buffer; |
| + | source.connect(context.destination); |
| + | source.start(0); |
| + | isPlaying = true; |
| + | } |
| + | |
| + | function pause() { |
| + | source.stop(0); |
| + | isPlaying = false; |
| + | } |
| + | |
| + | function togglePlay() { |
| + | if (!isPlaying) { |
| + | play(); |
| + | document.getElementById('playButton').innerHTML = 'Pause'; |
| } else { | | } else { |
− | audio.pause(); | + | pause(); |
− | playButton.innerHTML = 'Play'; | + | document.getElementById('playButton').innerHTML = 'Play'; |
| } | | } |
| + | } |
| + | |
| + | var audioFilePath = document.getElementById('audioFilePath').getAttribute('data-src'); |
| + | var buffer; |
| + | loadAudio(audioFilePath, function(decodedBuffer) { |
| + | buffer = decodedBuffer; |
| }); | | }); |
| })(); | | })(); |