I need a sample code for click to play music I am getting all of my mp3 files from my system folder and I would like to play that pieces of music.
My code like this
mp3name
mp3name1
mp3name2
mp3name3
How I should go about this using JavaScript?
You can use audio tag to play the audio, and if you want to pause one audio if another audio file is played here is a simple javascript code
check what are the elements playing right now and pause the audio which is currently playing.
Read more about audio tag from MDN
document.addEventListener('play', function(element){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len; i++){
if(audios[i] != element.target){
audios[i].pause();
}
}
}, true);
document.addEventListener('play', function(element){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len; i++){
if(audios[i] != element.target){
// console.log("audio paused");
audios[i].pause();
}
}
}, true);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
Play 1
Play 2
Play 3
Play 4
</div>
<audio
id="p1"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p2"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p3"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p4"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p5"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</body>
</html>
Source: multiple audio html : auto stop other when current is playing with javascript
You can use embed tag to play audio files
html
<embed src="mp3folder/mp3name.mp3" autostart="false" id="mp3name" enablejavascript="yes">
javascript
var mp3name = document.getElementById("mp3name");
mp3name.play();
Related
I am trying to merge Two videos taken as input by the user and then display it and also provide a download link for the final video. My code doesn't merge the two videos but plays them one after the other. So how can I merge them together and provide a download link?
The following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Video Editor</title>
</head>
<body>
<h1 align="center">Video editor</h1>
<h3> Merging Videos</h3>
<video width="400" controls id="video">
<source src="" id="video_here" class="active">
Your browser does not support HTML5 video.
<source src="" id="newvideo_here" class="">
</video>
<br><br>
<input type="file" name="file[]" class="file_multi_video" id= "myvid" accept="video/*">
<br><br>
<input type="file" name="file[]new" class="new_file_multi_video" id= "newmyvid" accept="video/*">
<br>
<br>
<br>
<h3> Video Spliting</h3>
<button>video spliting</button>
<h3> add audio to video</h3>
<script type="text/javascript" src="assets/js/videoEditor.js"></script>
</body>
</html>
javascript code:-
var myvid = document.getElementById('myvid');
var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('video_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
video.load();
video.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#video source.active");
var nextsource = document.querySelector("#video source.active + source") || document.querySelector("#myvideo source:first-child");
console.log("nextsource"+ nextsource);
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
video.src = nextsource.src;
video.play();
});
});
var myvid = document.getElementById('newmyvid');
//var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('newvideo_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
console.log(source.src)
//video.load();
});
I think you should mix the videos yourself using a technique like the one in this link: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation. It manipulates each pixel of each frame making it gray. Perhaps you could play the two videos simultaneously and mix the pixels together.
I don't know how to download the final generated video.
Seems like the paused property of the control is always true. I want one button to play/pause. It will play audio, but not pause on the click event.
I want the button to play when clicked first time, then pause when I click again. There would be many tracks as the audio control would need to use the data-song value to feed the source of the audio control. Anytime I code to check the data-song it will not pause.
<!DOCTYPE html>
<head>
<title>Test</title>
<script>
function playAudio()
{
var audio = document.getElementById('player');
var playbutton = document.getElementById('play');
var url = playbutton.getAttribute('data-song');
player.src = url;
if(audio.paused){
audio.play();
}
else
{
audio.pause();
}
}
</script>
</head>
<body>
<p id="play" onClick="playAudio()" data-song="rock.mp3" >play</p>
<audio controls id="player">
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Each time your function is called it sets the source of the audio again and
its default state is 'paused'. Put the source attribute in the audio tag like this:
<!DOCTYPE html>
<head>
<title>Test</title>
<script>
function playPause()
{
var audio = document.getElementById('player')
var playbutton = document.getElementById('play')
audio.controls = false
if(audio.paused){
audio.play()
playbutton.innerHTML = "stop"
}
else
{
audio.pause()
playbutton.innerHTML = "play"
}
}
</script>
</head>
<body>
<p id="play" onClick="playPause()" >play</p>
<audio id="player" src="lala.mp3"></audio>
</body>
</html>
So I have my code here, and it works great. Only thing is there are no mute/unmute buttons and I have no idea how to add them.
<audio src="MUSIC URL" autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
I use this, get a play and pause button .png and use them. Then make a folder called audio and put the files in there for you music. I put the play and pause in a folder called images.
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>
<audio controls loop>
<source src="**your website url here**/audio/waves.ogg" type="audio/ogg">
<source src="**your website url here**/audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="**your website url here**/images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
snd = document.getElementsByTagName('audio')[0],
ctrl = document.getElementById('pauseplay');
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
if(playing){snd.autoplay = false; ctrl.src = '**your website url** here/images/pause.png';}
ctrl.addEventListener('click', function(){
if(playing){
snd.pause();
} else {
snd.play();
}
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
ctrl.src = playing? '**your website url here**/images/pause.png' : '**your website url here**/images/play.png';
}, false);
})();
</script>
If you want to see it live look at this site I made.
You should add controls attribute to audio tag.
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
developer.mozilla
<audio src="http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9" controls>
<p>Your browser does not support the audio element </p>
</audio>
Very easy:
<button onclick="document.getElementsByTagName('audio')[0].play();">Sound on</button>
<button onclick="document.getElementsByTagName('audio')[0].pause();">Sound off</button>
<audio autoplay preload="auto" loop src="your.mp3"></audio>
It is set on autoplay and loop, you can pause and resume by clicking the buttons. The best way to avoid diplaying the unsuitable browser player.
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function(){
$('audio').each(function(){
this.pause(); // Stop playing
// Reset time
});
$('#Swensens_maze_audio').get(0).play();
return false;
});
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
EDIT The audio now automatically strats
EDIT 2 I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map {width:100%;height:75px;background:#bbb}
.c1 {background:#f2f2f2}
.c2 {background:#000}
.c3 {background:#cc4444}
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
});
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.get(0).play();
return false;
});
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map {
width:100%;
height:75px;
background:#bbb
}
.c1 {
background:#f2f2f2
}
.c2 {
background:#000
}
.c3 {
background:#cc4444
}
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.play();
return false;
});
</script>
</body>
</html>
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
Your browser tries to preload the audio for each audio tag. So the answer is to set the attribute preload in the audio tag to value none
use can use: <audio controls preload="none">
I am trying to play a .ogg file which i also converted into a .mp3 file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<body onclick = "playSound('file:///C:/Users/Rehaan/Downloads/myfirstrecording%20(3).ogg');">
<p id = "sound">
</p>
Click here to play the sound!
</body>
</html>
This is the java script file,
function playSound( url ){
document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
}
I would recommend using the HTML5 audio tag.
<audio id="audio_samples" src="mymp3audiofile.mp3" controls></audio>
The audio tag supports mp3, ogg, and wav audio files.
Also, here are Javascript audio control functions that you may find useful:
<script type="text/javascript">
var audio = document.getElementById("audio_samples");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
function restartAudio() {
audio.load();
audio.play();
}
function louder() {
audio.volume += 0.1;
}
function softer() {
audio.volume -= 0.1;
}
</script>
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="restartAudio()">Restart</button>
<button onclick="louder()">Louder</button>
<button onclick="softer()">Softer</button>
I hope this helps!
You can use HTML5 Tag which is <audio>. It can play .mp3, .ogg, .wav format.
This is an example that I got from w3schools.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>