There is a js-script:
<script>
function start1() {
var audio = new Audio();
audio.src = URL.createObjectURL(document.getElementById('f1').files[0]);
audio.autoplay = true;
}
function start2() {
var audio = new Audio();
audio.src = URL.createObjectURL(document.getElementById('f2').files[0]);
audio.autoplay = true;
}
...
function stop() {
var audio = new Audio();
audio.stop();
}
</script>
and html code:
<body>
<input type="file" id="f1"></input>
<input type="file" id="f2"></input>
...
<button onmousedown="start1()" onmouseup="stop()">1</button>
<button onmousedown="start2()" onmouseup="stop()">2</button>
...
As can be understood through the script, he plays a sound file that loads by using the form files.
But there are two problems:
1) requires that sound is played only during events pressing (onmousedown) and stops when the mouse button is released (onmouseup).
Now the sound is played to the end it does not matter whether you clicked the mouse button and let go of it (because there is no test for this condition).
2) also need to create a simplified version of the script, as the functions for processing should be 16 pieces, but not manually register the same each function. You must create a generated script that will process the N-number of id (start1, start2, etc., f1, f2, etc).
Help to modify the code, you can also fully code jquery. It is not critical.
Thank you.
You can use local variables, you just need an identifier to find the audio element later. You also need to append the audio element to the DOM.
Also, you have to use pause() not stop().
<script>
function start(id, source) {
var aud = document.getElementById(id);
if (aud) {
aud.parentNode.removeChild(aud);
}
var audio = new Audio();
audio.setAttribute("id", id);
audio.src = URL.createObjectURL(document.getElementById(source).files[0]);
document.body.appendChild(audio);
audio.autoplay = true;
}
function stop(id) {
var aud = document.getElementById(id);
aud.pause();
}
</script>
<input type="file" id="f1"></input>
<input type="file" id="f2"></input>
<button onmousedown="start('1', 'f1')" onmouseup="stop('1')">1</button>
<button onmousedown="start('2', 'f2')" onmouseup="stop('2')">2</button>
This should work (Untested):
<script>
var a1 = new Audio();
var a2 = new Audio();
function start1() {
a1.src = URL.createObjectURL(document.getElementById('f1').files[0]);
a1.autoplay = true;
}
function start2() {
a2.src = URL.createObjectURL(document.getElementById('f2').files[0]);
a2.autoplay = true;
}
function stop() {
a1.stop();
a2.stop();
}
</script>
Related
I'm trying to create, as a starting excercise, a soundboard for our D&D sessions. I'm currently trying to make it so that when a button is clicked, the variable 'audio' is set to that, and that it then runs the function to play or pause audio, depending on whether it's running or not. I have JS and HTML in the same file (I realise this isn't good, however). Below is my code:
<button id="play1st">Heroic Battle Music</button>
<button id="play2nd">Military Battle Music</button>
<button id="play3rd">Stronghold Battle Music</button>
<!--Audio to be played -->
<audio id="heroic" src="heroic.mp3"></audio>
<audio id="combat_rome" src="combat_rome.mp3"></audio>
<audio id="stronghold" src="stronghold.mp3"></audio>
<!--JavaScript audio -->
<script>
function playMusic() {
document.getElementById("play1st").addEventListener ('click', music1());
document.getElementById("play2nd").addEventListener ('click', music2());
document.getElementById("play3rd").addEventListener ('click', music3());
var isPlaying = false;
function music1() {
var audio = new Audio("heroic.mp3");
togglePlay();
};
function music2() {
var audio = new Audio("combat_rome.mp3");
togglePlay();
};
function music3() {
var audio = new Audio("stronghold.mp3");
togglePlay();
};
function togglePlay(){
if (isPlaying){
pause()
} else {
audio.play();
}
};
audio.onplaying = function () {
isPlaying = true;
};
audio.onpause = function () {
isPlaying = false;
}};
</script>
I'm probably missing something very basic, so any explanation would be most welcome. Thank you!
function playSound(buffer) {
aSoundSource = audioContext.createBufferSource(); source.
aSoundSource.buffer = buffer;
aSoundSource.connect(gainNode);
gainNode.connect(analyser);
var volX = volControl();
//gainNode.gain.value = 0.1;
gainNode.gain.value = volX;
analyser.connect(audioContext.destination);
aSoundSource.start(0);
document.title = document.getElementById("files").value;
playing = true;
requestAnimFrame(drawVisualisation);
}
///////////////////////////////////////
function play(){
var audio = new Audio('test.mp3');
audio.play();
}
second function is working perfectly its i have called particular audio to play its working for button here i want to input a song and play
Havent tested but this is the rough idea
document.getElementById("inputFile").onchange = loadMusic
function loadMusic(e) {
console.log(e.target.value)
var audio = new Audio(e.target.value)
audio.play();
}
<input type="file" id="inputFile">
So, I'm a complete amateur when it comes to coding, but I still like to fiddle around with it.
I'm currently working on a html/jS/PHP based soundboard and I can't figure out how to stop sound from playing when pressing a button to play another one.
<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>
I hope someone understands that. Thanks in advance.
There is also a PHP code to fetch the audio file automatically from the folder to the front end, probably unnecessary info for this problem.
This is not very difficult to do if you use HTML5 which introduced the HTMLAudioElement.
Here is the minimal code for what you are trying to do:
// 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>
You may also consider libraries like howler.js to help you in the development process.
What you could do, is before start playing a new audio pause all available audio on the page. Something like this.
var audioOne = document.querySelector('#audio-1');
var audioTwo = document.querySelector('#audio-2');
var allAudios = document.querySelectorAll('audio');
function stopAllAudio(){
allAudios.forEach(function(audio){
audio.pause();
});
}
document.querySelector('#play-1').addEventListener('click', function(){
stopAllAudio();
audioOne.play();
})
document.querySelector('#play-2').addEventListener('click', function(){
stopAllAudio();
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>
<button id="play-1">
play audio 1
</button>
<button id="play-2">
play audio 2
</button>
</body>
</html>
Instead of adding audio using <audio> tag you could use HTMLAudioElement.
You can stop and reset an audio element by pausing it and setting its current time to 0. You would need to do this whenever a button is clicked. Example:
// 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>
In case you want to leverage the full power of the Web Audio API, you would probably start building your soundboard similar to this:
// 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>
Please note that the sound URLs given above must either be on the same domain or available under the same origin policy (see CORS headers).
Below code may help others:
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;
}
});
});
});
For the ones that don't use the audioTag in HTML5 and want to use only vanilla js this may help ya
var songplaying = null; //This is where we will store the current playing song
function playsong(song_name){
//settings
var playing = null;
if(songplaying==null){ //If a song isn't stored that means that it's not playing and vice versa
playing = false;
}else{
playing = true;
}
var dir = "./songs/"+song_name+".mp3"; //Here we get the directory of the song
var song = new Audio(dir); //Making a new audio element
if(!playing){ //This runs when no song is playing
song.play();
songplaying=song; //We save the current playing song
}else{ //This runs when another song is already playing
var song_alredyplaying = songplaying; //We get the audio element (song)
song_alredyplaying.pause(); //Pause the song
song.play(); //Then we play the new song
songplaying=song; //Save the current playing song
}
}
//Example
var playbtn = document.querySelector(".play");
playbtn.addEventListener('click', function(){
playsong("the song name");
};
I want to play only one audio at a time in response to some mouse event. The situation is onmouse over event on different HTML element plays audio. It becomes noisy when a user moves the mouse fast from one element to another and both the element plays audio. I want to check whether any audio is being played before playing a new audio. I used following code:
var $audioAnno=0;
function audioAnnotation(y){
var audio;
if ($audioAnno==0){
$audioAnno=1;
audio = new Audio(y);
audio.play();
$audioAnno=0;
}
}
It does not stop the 2nd audio to play.
this is how, I would do it, maintain a flag canPlay and on mouse event, if true, then play
canPlay = true;
var es = document.getElementsByTagName('audio'), audios=[];
for(var i=0;i<es.length;i++) audios.push(es[i]);
audios.forEach(function(e){
e.addEventListener('play', function(){
canPlay= false;
});
e.addEventListener('ended', function(){
canPlay= true;
});
});
// later on some mouseEvent based on some condition
function onMouseEvent(audioElement){
if(canPlay){
audioElement.play();
}
};
Edit: fiddle demo.
Edit2:
same thing with just audio object:
var audio = new Audio(), canPlay = true;
audio.src = 'http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg';
audio.addEventListener('play', function(){
console.log('playing');
canPlay = false;
});
audio.addEventListener('ended', function(){
console.log('stopped');
canPlay = true;
});
audio.play();
//similar mouse event listener changes to
function onMouseEvent(){
if(canPlay){
//audio.src ='...'; // providing new source
audio.play();
}
};
Thanks all.
I could solve the problem. I used following code:
var $audioAnno=0;
function audioAnnotation(x, y){
var audio = new Audio(y);
if ($audioAnno==0){
$audioAnno = 1;
audio.play();
audio.addEventListener("ended", function(){ $audioAnno = 0; });
}
}
I saw this deface from anonymous, so I want to add a hidden chiptune song when playing the game, but got kinda lost.
<script type="text/javascript" src="http://www.ussc.gov/include/js/konami.js"></script>
<script type="text/javascript">
var success = function() {
document.body.style.backgroundImage = "url(http://3.bp.blogspot.com/-vKs53Qq5mBI/T9vCsCb-irI/AAAAAAAAB8U/CZsS0iY5RjY/s1600/14685_1_other_wallpapers_anonymous.jpg)";
document.body.style.backgroundSize = "100%";
if(window.KICKASSGAME){window.KICKASSGAME.menuManager.menu.messageTypeChangeShip('242,0');
window.KICKASSGAME.menuManager.destroy()}else{
alert("AntiSec CAEK-mode activated... Destroy the system! Controls: up, down, left, right, space to fire.");
var KICKASSVERSION='2.0';
var s = document.createElement('script');
s.type='text/javascript';document.body.appendChild(s);
s.src='//hi.kickassapp.com/kickass.js';
void(0);}
}
var konami = new Konami(success);
</script>
play is the method you are looking for
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'YourSong.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
Check this out.. It may help you..!
function play_sound(url){
if(play_html5_audio){
var snd = new Audio(url);
//code
snd.play();
}else{
var sound = $("<embed id='sound' type='audio/mpeg' />");
//code
$('body').append(sound);
}
}
play_sound('beep.mp3');
Source Code found # Automatically playing audio with HTML5 and Javascript