Javascript停止播放声音时，另一个开始

所以，我是一个完整的业余编程，但我仍然喜欢摆弄它。我目前正在研究一个基于html/jS/PHP的音板，我无法弄清楚如何在按下按钮播放另一个按钮时停止播放声音。Javascript停止播放声音时，另一个开始

<script type="text/javascript" charset="utf-8"> 
     $(function() { 
      $("audio").removeAttr("controls").each(function(i, audioElement) { 
       var audio = $(this); 
       var that = this; //closure to keep reference to current audio tag 
       $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() { 
        that.play(); 
       })); 
      }); 
     }); 
    </script>

我希望有人能够理解这一点。提前致谢。还有一个PHP代码从文件夹自动获取音频文件到前端，这可能是不必要的信息。

来源

2017-04-15 Niko Piiroinen

你有没有考虑使用[网络音频API（https://developer.mozilla.org/en/docs/Web/API/Web_Audio_API）？ –

@le_m不，我不知道，因为我甚至不知道任何编码语言的基础知识，只是碰巧发现这个已经集成了PHP fetcher的几乎完整的。如果有人为我提供了一种适合我需求的不同类型的球员，当然，我会改变它。 –

如果您使用引入了HTMLAudioElement的HTML5，这并不是很困难。

这里是你正在尝试做的最少的代码：

// Let's create a soundboard module ("sb") 
 
var sb = { 
 
    song: null, 
 
    init: function() { 
 
    sb.song = new Audio(); 
 
    sb.listeners(); 
 
    }, 
 
    listeners: function() { 
 
    $("button").click(sb.play); 
 
    }, 
 
    play: function (e) { 
 
    sb.song.src = e.target.value; 
 
    sb.song.play(); 
 
    } 
 
}; 
 

 
$(document).ready(sb.init);

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Audio</title> 
 
</head> 
 
<body> 
 
    <button value="https://www.gnu.org/music/FreeSWSong.ogg">Song #1</button> 
 
    <button value="https://www.gnu.org/music/free-software-song-herzog.ogg">Song #2</button> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body> 
 
</html>

您也可以考虑像howler.js库，帮助您在开发过程中。

来源

2017-04-15 21:43:59 Badacadabra

谢谢！这对我来说很好。不得不稍微调整一下PHP代码，但至少对我来说很简单。 –

你可以做什么，是在开始播放新的音频暂停页面上的所有可用音频之前。像这样的东西。

var audioOne = document.querySelector('#audio-1'); 
 
var audioTwo = document.querySelector('#audio-2'); 
 

 
var allAudios = document.querySelectorAll('audio'); 
 

 
function stopAllAudio(){ 
 
\t allAudios.forEach(function(audio){ 
 
\t \t audio.pause(); 
 
\t }); 
 
} 
 

 
document.querySelector('#play-1').addEventListener('click', function(){ 
 
\t stopAllAudio(); 
 
\t audioOne.play(); 
 
}) 
 
document.querySelector('#play-2').addEventListener('click', function(){ 
 
\t stopAllAudio(); 
 
\t audioTwo.play(); 
 
})

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<audio id="audio-1" 
 
    src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"> 
 
</audio> 
 
<audio id="audio-2" 
 
    src="http://www.w3schools.com/html/horse.mp3"> 
 
</audio> 
 

 
\t <button id="play-1"> 
 
\t \t play audio 1 
 
\t </button> 
 
\t <button id="play-2"> 
 
\t \t play audio 2 
 
\t </button> \t 
 
</body> 
 
</html>

而不是使用<audio>标签，你可以使用HTMLAudioElement添加音频。

来源

2017-04-15 21:46:22 azs06

通过暂停它并将其当前时间设置为0，您可以stop and reset an audio element。无论何时按下按钮，您都需要执行此操作。例如：

// Available sounds: 
 
const sounds = { 
 
    "Bottle": "http://freewavesamples.com/files/Bottle.wav", 
 
    "Bamboo": "http://freewavesamples.com/files/Bamboo.wav" 
 
} 
 

 
// Load audio elements: 
 
let audios = {}; 
 
for (let [title, url] of Object.entries(sounds)) { 
 
    audios[title] = new Audio(url); 
 
} 
 

 
// Create board buttons: 
 
let board = document.getElementById("board"); 
 
for (let title of Object.keys(audios)) { 
 
    let button = document.createElement("button"); 
 
    button.textContent = title; 
 
    button.dataset["audio"] = title; 
 
    board.appendChild(button); 
 
} 
 

 
// Handle board button clicks: 
 
board.addEventListener("click", function(event) { 
 
    let audio = audios[event.target.dataset["audio"]]; 
 
    if (audio) { 
 
    // Pause and reset all audio elements: 
 
    for (let audio of Object.values(audios)) { 
 
     audio.pause(); 
 
     audio.currentTime = 0; 
 
    } 
 
    // Play this audio element: 
 
    audio.play(); 
 
    } 
 
});

<div id="board"></div>

如果你想充分利用Web Audio API的全部力量，你可能会开始建立类似的音板这样的：

// Load buffer from 'url' calling 'cb' on complete: 
 
function loadBuffer(url, cb) { 
 
    var request = new XMLHttpRequest(); 
 
    request.open('GET', url); 
 
    request.responseType = 'arraybuffer'; 
 
    request.onload =() => context.decodeAudioData(request.response, cb); 
 
    request.send(); 
 
} 
 

 
// Available sounds: 
 
const sounds = { 
 
    "Bottle": "url/to/bottle.wav", 
 
    "Bamboo": "url/to/bamboo.wav" 
 
}; 
 

 
let audioCtx = new (AudioContext || webkitAudioContext)(), 
 
    board = document.getElementById("soundboard"), 
 
    buffers = {}, 
 
    source; 
 

 
// Load buffers: 
 
for (let [title, url] of Object.entries(sounds)) { 
 
    loadBuffer(url, buffer => buffers[title] = buffer); 
 
} 
 

 
// Create board buttons: 
 
for (let title of Object.keys(sounds)) { 
 
    let button = document.createElement("button"); 
 
    button.textContent = title; 
 
    button.dataset["buffer"] = title; 
 
    board.appendChild(button); 
 
} 
 

 
// Handle board button clicks: 
 
board.addEventListener("click", function(event) { 
 
    let buffer = buffers[event.target.dataset["buffer"]]; 
 
    if (buffer) { 
 
    if (source) source.stop(); 
 
    source = audioCtx.createBufferSource(); 
 
    source.buffer = buffer; 
 
    source.connect(audioCtx.destination); 
 
    source.start(); 
 
    } 
 
});

<div id="soundboard"></div>

请注意，所提供的声音网址以上必须位于相同的域或在相同的源策略下可用（请参阅CORS标头）。

来源

2017-04-15 22:23:18

下面的代码可以帮助别人：

var audioMap = new Map(); 
var rappers = document.querySelectorAll('.rapper'); 
rappers.forEach(function(rapper){ 
    audioMap.set(rapper, new Audio()); 
    rapper.addEventListener('click', function(){ 
     var audio = new Audio($(this).data('audio')); 
     audio.play(); 
     audioMap.set(this, audio); 
     var current = audioMap.get(this); 
     // console.log('get', current); 
     audioMap.forEach(function(audio){ 
      if(audio != current){ 
       audio.pause(); 
       audio.currentTime = 0; 
      } 
     }); 
    }); 
});

来源

2017-10-16 06:39:48

Javascript停止播放声音时，另一个开始

回答

相关问题