We Keep Coding

change play/pause button when audio is played (inner html)

I'm coding a playlist.
I would like to create a button that would pause/play my audios. One button that would work for all my audios no matter which one is currently playing.
For now, I have a button that can pause the audio playing, but I can't manage to make a button that resumes the audio where it stopped.
On click on title, the audio starts playing.
On click on the button, I'd like to pause or resume the audio playing, and to change the text from Pause to Play and vis-versa.
If you click on a title again, I'd like the audio to play from beginnig.
Here is the html :
<div class="audio" onclick=
"playAudio('algebrasuicide_fathersbythedoor.wav')">algebra suicide father by the door
</div>
<div class="audio"onclick=
"playAudio('algebrasuicide_inbedwithboys.wav')">
algebra suicide in bed with boys
</div>
<div class="audio"onclick=
"playAudio('aprilmagazine_parade.wav')">
april magazine parade
</div>
<button onclick="pauseAudio()">
pause
</button>
Here is the js :
let audio;
function stopAudio() {
if (audio && !audio.paused) {
audio.pause();
audio.currentTime = 0;
}
}
function playAudio(src) {
stopAudio();
audio = new Audio();
audio.src = src;
audio.play();
}
function pauseAudio(){
audio.pause();
}
From what I understand I may need to change the inner html or to add a player but I tried a lot of codes from SO and can't manage to find how to make it work.
I hope you can help me ! It's probably simple but I'm very novice.
Thank you :)

HTML5 video not restarting

Thanks in advance for any help you're able to give. The issue I'm having is that the following code is in a javascript function when a button is clicked. The desired behavior is that on button click, a video fades in, plays for 10 seconds, and fades back out. Then when the button is clicked again, this behavior repeats.
Issue is, the second time the button is clicked, the video fades in but is already at the end of the video and then fades out after 10 seconds. Any idea why the vid.currentTime is not properly resetting the video?
var webm = document.getElementById('src');
webm.src = "src.webm";
var vid = document.getElementById('video');
vid.currentTime = 0;
vid.play();
vid.fadeToggle(1000);
setTimeout(function() {
vid.fadeToggle(1000);
}, 10000);
and this is where the video file is imported
<video id="video" width="100%" Style="Display:none">
<source id="src" src="src.webm" type="video/webm" />
</video>
Additional info has come to light. This only happens in Chrome, and doesn't happen even in Chrome when it's opened locally, only when the html page is served statically via express.

Try
vid.load(); instead of vid.currentTime = 0;

Maybe you can try to add autplay to the video attribute, but I think the video will start looping.
<video id="video" width="100%" Style="Display:none" autoplay>
OR you can add this function or javascript line to your button function.
vid.load();
source: http://www.w3schools.com/tags/av_met_load.asp

Figured out that this was only an issue in chrome and seems to have to do with this question:
can't seek html5 video or audio in chrome

Making audio mute while other audio is playing

I have a client that would like background music to be playing while her students take a quiz. However, the quiz requires that certain audio files play through onclick effects. When a student clicks to play an audio file, my client would like the background music to mute, then resume playing once the onclick audio file is finished.
Is there any way to do this? Here is the code I'm using to fire the small, onclick audio effects:
var effect1 = document.createElement('audio');
effect1.setAttribute('src', 'audio.mp3');
$.get();
effect1.addEventListener("load", function() {
effect1.play();
}, true);
$('.effect1').click(function() {
effect1.play();
});
And here is my background music code:
<audio autoplay loop>
<source src="background.mp3">
</audio>
Any help is appreciated. Thanks!
Lauren

add an id to your audio tag
<audio id="bgplayer">
and then use jQuery to pause it before playing the click
$('#playeffect').click(function() {
$('#bgplayer').pause();
$('#effect1').play();
to resume it, you will need to add a listener to get fired at the end event of the clip
$('#effect1').on('ended', function() {
$('#bgplayer').play();
});

Change firefox playback bar into a onclick button for audio

SAME ISSUE! As we all know firefox and audio is a problem because of patents and such. I found this little code on the internet to play my sounfile.
I would like to play multiple files instead of just one while having the display bar not show up in the browser
you can change the player width to 0 but than the user can not click the play button :P
Is there a way of possibly having the sound play on click of a link or button.
Please note. Do not give me codes that have no compatibility outside chrome and ie.
HTML
<audio id="audioplayer" preload controls loop style="width:400px;">
<source src="sounds/sound1.mp3">
<source src="sounds/sound1.caf">
</audio>
Javascript
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "sounds/sound1.mp3"});
}
</script>
RECAP:
Have the sound play on a button or link click.
Have multiple sounds available to play (not just one)
Compatibility with firefox
non visible soundbar.

Still learning myself. But this is a button, with a script to play an audio file. (part of my own solution) Plays only 1 sound at a time, but doesn't show anything about it.
You could also make a funtion like this, without setting the src, using the pause() command.
currenttime is used to change the part where the audio file was.
Sound play button<br>
<script>
sound = new Audio();
function playSnd(soundSrc) {
sound.src = soundSrc;
sound.play();
}
</script>

JavaScript document doesn't change after function call

I'm trying to build a simple HTML5 music player with JavaScript.
I've build a player with this code:
<audio controls="controls">
<source id="song" src="horse.ogg" type="audio/ogg">
</audio>
I've build a couple of <a> which call function changeSong(n);
function changeSong(n) {
document.getElementById("song").src = "song" + n + ".mp3";
}
and when I click the <a>'s nothing happens to the document, and it won't work..
The <a>'s:
Play song 1 </br>
Play song 2
What do to make it work?
////
I tried just running the JavaScript w/o function and it works. but when it's called from the as a function it doesn't...

Change:
Play song 2
With:
Play song 2
Is that a typo?
Actually, it works in the console:
document.getElementById("song");
<source id=​"song" src=​"horse.ogg" type=​"audio/​ogg">​
document.getElementById("song").src;
"chrome://newtab/horse.ogg"
document.getElementById("song").src = 'Hi.ogg';
"Hi.ogg"
document.getElementById("song").src;
"chrome://newtab/Hi.ogg"

You miss the name of the method in the call. This works:
Play song 1 </br>
Play song 2

what is your goal ? Do not tell me that you are trying to call the
changeSong(1)
on the "Play song 1" click.
just by reading your code I can say that change
Play song 2
by
Play song 2
Or I'm missing something :/
Can you add some debug code into the
changeSong(n){
document.getElementById("song").src="song"+n+".mp3";
}
an tell us if something is appening :)

I'm not familiar with HTML5 , but I can find two errors.
You're calling playSong instead of changeSong
You should declare that changeSong is a function:
function changeSong(n){
document.getElementById("song").src = "song" + n + ".mp3";
}