I can not used javascript to control audio in chrome

I can not used javascript to control audio in chrome - javascript

When I click the button "play" or "pause", it does not work in Chrome:
<script>
var audioPlayer = document.getElementsByName("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
HTML:
<audio id="player_audio" controls>
<source id="audio_sources" src="http://admin.test.cnrmobile.com/18/1463652002.aac">
<p>
<button onclick="play()"> play </button>
</p>
<p>
<button onclick="pause()"> pause </button>
</p>

<!DOCTYPE html>
<html>
<body>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button><br>
<audio id="myAudio" width="320" height="176">
<source src="http://admin.test.cnrmobile.com/18/1463652002.aac" type="audio/ogg">
Your browser does not support HTML5 audio.
</audio>
<script>
var aud = document.getElementById("myAudio");
function playAudio() {
aud.play();
}
function pauseAudio() {
aud.pause();
}
</script>
</body>
</html>
https://jsfiddle.net/0fjgxosu/
Your example with document.getElementById instead works just fine too:
<script>
var audioPlayer = document.getElementById("player_audio");
function play(){
audioPlayer.play();
}
function pause(){
audioPlayer.pause();
}
</script>
https://jsfiddle.net/0fjgxosu/1/

Related

Why do the javascript video buttons not work?

I'm only trying to add a mute/unmute button, I followed a couple of tutorials, wrote the same code but it doesn't seem to be working.
Also, if any one of you feels particularly generous today, could you please show me how to make a single button that mutes, and when clicked again, unmutes the video sound?
<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteVideo()" type="button">Mute sound</button>
<button onclick="unmuteVideo()" type="button">Enable sound</button>
</div>
</div>
<script>
var my=document.getElementById("vid");
function playVideo(){
my.play();
}
function muteVideo(){
my.muted = true;
}
function unmuteVideo(){
my.muted = false;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
</div>
</div>
<script>
var my=document.getElementById("vid");
function playVideo(){
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
</script>
</body>
</html>

This Code Works fine
<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid" width="400" controls>
<source src="../../Downloads/Bohemian Rhapsody _ Muppet Music Video _ The Muppets_360p.mp4"
type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<div class="controller">
<button onclick="muteVideo()" type="button">Mute sound</button>
<button onclick="unmuteVideo()" type="button">Enable sound</button>
</div>
</div>
<script>
let my = document.getElementById("vid");
const playVideo = () => {
my.play();
}
function muteVideo() {
console.log("hello");
my.muted = true;
}
function unmuteVideo() {
my.muted = false;
}
</script>
</body>
</html>

How do play an audio file on a button click using HTML and JavaScript?

This code only returns a volume icon and a link property, doesn't play audio file:
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name">
My name is
<div>
<a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a>
</div>
Basiyath Zubair
<audio id="audio" src="./audio/name.mp3"></audio>
</div>

If you assign the correct URL to the src attribute of audio, it will work, e.g.
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="name">
My name is
<div>
<a><i class="fa fa-volume-up" style="font-size:24px" onclick="playSound()"></i></a>
</div>
Basiyath Zubair
<audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</div>

Try this, it may work for you
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="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>

How can I get an img button that plays audio when you click the button?

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>

Play sounds quickly

I'm making a javascript code where if you press a button, there's a sound.
HTML piece of code:
<audio id="sound" src="sound.wav"></audio>
...
<input class="button_white" type="button" onClick="document.getElementById('sound').play()"></input>
I noticed that when I press quickly the button, it doesn't play any sound (a sort of lag).
Is there a way to resolve this problem?

<audio controls>
<source src="sound.wav" type="audio/ogg">
</audio>
use built in "control" attribute to play the source file.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio or
Button tag to handle it
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
<audio id="myAudio">
<source src="sound.wav">
</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>

How to play sound through HTML buttons

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();
});

Develop Reference

JavaScript is the programming language of the Web.

I can not used javascript to control audio in chrome - javascript

Related

Why do the javascript video buttons not work?

How do play an audio file on a button click using HTML and JavaScript?

How can I get an img button that plays audio when you click the button?

Play sounds quickly

How to play sound through HTML buttons

Categories

Resources