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>
Related
I need a Mute/Unmute button and an tag that can only mute the sound of a video when clicked.
The mute/unmute button works fine, but the <a tag doesn't do anything
<!DOCTYPE html>
<html>
<body>
<div>
<video src="video.mp4" id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
Stop Sound
</div>
</div>
<script>
var my = document.getElementById("vid");
const playVideo=() => {
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
let exitvid = document.getElementById("vid");
function stopSound(){
exitvid.muted = false;
}
</script>
</body>
</html>
Why are you using the js code
try to use built in video tag you can get the controllers by default
<video controls muted width="80%" height="50%">
<source src="https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4/" type="video/mp4">
</video>
I have the audio working but there is a problem with my img as button. They don't move together but separately. And its not just the img that is shown but also the button itself and I just want the img to be the button.
I also want the button to move to the back of the page and don't take up any space.
When I use z-index: -1; the function of button disappears and it no longer works as a button.
Here is the code:
<!DOCTYPE html>
<html>
<div class="omheen">
<div>
<audio id="audioContainer">
<source src="spraakbericht.m4a" type="audio/mpeg">
</audio>
<div id="memo">
<button id="play" onclick="playMp3()" type="button">
<img class="memo" src="messages-05.png"/>
</div>
</button>
<button id="pause" onclick="pauseMp3()" type="button">Pause Mp3</button>
</div>
</div>
<script>
const audioContainer = document.getElementById("audioContainer");
function playMp3() {
audioContainer.play();
}
function pauseMp3() {
audioContainer.pause();
}
</script>
<script>
var play = document.getElementById("play");
var pause = document.getElementById("play");
play.innerHTML = '<img src="\messages-05.png" />';
pause.innerHTML = '<img src="\messages-05.png" />';
</script>
</html>
Any help is greatly appreciated!
You need an element in your html with the src set to your sound file, also give it an id. Grab a reference to that audio element with document.getElementByID and set it to a variable. Set an onclick attribute on your button and inside that function defintion chain the play() method off of your variable that references your audio element.
<audio src="./myaudio.mp3" id="myAudio"></audio>
<button onclick="playAudio()">Click To Play Audio</button>
<script>
let myAudio = document.getElementByID("myAudio");
function playAudio(){
myAudio.play();
}
</script>
This is how to play audio in HTML:
<!DOCTYPE html>
<html>
<body>
<audio id="audioContainer">
<source src="myMp3.mp3" type="audio/mpeg">
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button id="play" onclick="playMp3()" type="button">Play Mp3</button>
<button id="pause" onclick="pauseMp3()" type="button">Pause Mp3</button>
<script>
const audioContainer = document.getElementById("audioContainer");
function playMp3() {
audioContainer.play();
}
function pauseMp3() {
audioContainer.pause();
}
</script>
</body>
</html>
To add images to the background of the buttons
var play = document.getElementById("play");
var pause = document.getElementById("play");
play.innerHTML = '<img src="images/play.png" />';
pause.innerHTML = '<img src="images/pause.png" />';
Try this way
<input type="button" value="press play" onclick="melody()">
<audio id="html" src="anypath" ></audio>
<script>
function melody() {
var audio = document.getElementById("html");
audio.play();
}
</script>
My current method of playing music through my website is by the HTML audio tags. However I want to be able to play it through HTML button instead. This button should be able to toggle the music between playing and stopping. I've created an example on JSFiddle but don't know how to implement it. Could someone please show me how to do it using my JSFiddle example?
JSFiddle: http://jsfiddle.net/jTh3v/332/
Original way I done it:
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";
you can play sound by onclick event...insert a button on html.write a function and call it at your button as onclick event.
function playMusic(){
var music = new Audio('musicfile.mp3');
music.play();
}
<input type="button" value="sound" onclick="playMusic()" />
Make sure to give a valid filename.
This will work:
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";
$('#button_play').on('click', function() {
//I added this
$("audio")[0].play();
$('#button_pause').show();
$('#button_play').hide();
});
$('#button_pause').on('click', function() {
//I added this
$("audio")[0].pause();
$('#button_play').show();
$('#button_pause').hide();
});
.second {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br>
<p>HTML Audio tag method (the method I don't want):</p>
<div id="soundTag"></div><br>
<p>Button method (the method I want, but doesn't work):</p>
<div>
<button id="button_play" class="first" type="button">
<i class="glyphicon glyphicon-volume-up"></i></button>
<button id="button_pause" class="second" type="button">
<i class="glyphicon glyphicon-volume-off"></i></button>
</div>
This worked. Delete my mp3 file and upload your own mp3 file.
<button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
try it like this
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});
The idea here is to take the audio element from the array that returns and use the methods for the HTML5 tag. All the methods you can find from here
Play and pause buttons.
Info and code comes from https://www.w3schools.com/jsref/met_audio_play.asp
I put it on this http://jsfiddle.net/654qasw0/ (changing sound sources)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
or:
<button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
if they don't work just try this:
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});
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>
Here is a small html file which creates a timer image and plays a timer music when I click it.
<html>
<head>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML = "<embed src=\"" + soundfile + "\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<a href="#" onclick="playSound('timer.mp3');">
<img src="timer.png"/>
</a>
</td>
</tr>
</table>
<span id="dummy"></span>
</body>
</html>
I am new to JavaScript but here is what I want:
When the user click the image the music should be played non-stop until the user clicks the image again.
How do I do this?
<audio id="player" controls="controls"></audio> Remove "control" if you don't
<button onClick="playFile('timer.mp3')">Play/Stop</button> need it.
var playing = false; //pre set plaing to false
function playFile(n){
var player = document.getElementById("player"); //get the <audio>
player.src = n; //set the url
playing = !playing; //flip the status
playing ? player.play(): player.stop(); //play/stop
player.addEventListener("ended", function(){ //When ended,
player.play(); //play again
//do other stuff
});
}
<audio id="myAudio" controls preload loop>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type='audio/mp4'>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type='audio/ogg; codecs=vorbis'>
Your user agent does not support the HTML5 Audio element.
</audio>
<img src="img/ex1.png" onclick="aud_play_pause()"/>
<script>
function aud_play_pause() {
var myAudio = document.getElementById("myAudio");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>
use this code for non stop audio play on image button.
set your audio in source src.