How to custom Play/Pause image For HTML5 Audio Using JavaScript - javascript

how could I make this happen? For example.....
Once I have clicked 'button play' the changes to 'button pause'
and once I have clicked 'button pause' the changes to 'button play'.
I want to custom audio tags,but I don't know how to make it.
I don't know how to use Javascript to switch image.
I trying to find a way,but I don't understand it. T-T
Below is what I using in html template:
<button><img src="{% static "img/play.png" %}"></button>
<button><img src="{% static "img/pause.png" %}"></button>
<audio controls>
<source src="{{ song.song_file.url }}" type="audio/mp3">
</audio>
Thanks a lot


var track = document.getElementById('track');
var controlBtn = document.getElementById('play-pause');
function playPause() {
if (track.paused) {
track.play();
//controlBtn.textContent = "Pause";
controlBtn.className = "pause";
} else {
track.pause();
//controlBtn.textContent = "Play";
controlBtn.className = "play";
}
}
controlBtn.addEventListener("click", playPause);
track.addEventListener("ended", function() {
controlBtn.className = "play";
});
#player-container #play-pause {
cursor: pointer;
text-indent: -999999px;
height:40px;
width: 40px;
background: #eb01a5;
background-image: url('http://basichow.com/asserts/images/play.png');
background-repeat:no-repeat;
background-position:center;
background-size:20px;
}
.play {
background-image: url('http://basichow.com/asserts/images/play.png');
}
.pause {
background-image: url('http://basichow.com/asserts/images/pause.png')!important;
}
<audio id="track">
<source src="http://basichow.com/asserts/interlude.mp3" type="audio/mpeg" />
</audio>
<div id="player-container">
<div id="play-pause" class="play">Play</div>
</div>

Related

How to perform jquery script only once?

I use the isInViewport script to play the video on scroll, but it doesn't look very good because it happens multiple times. Please tell how to limit the triggering of animation or video playback to literally once. Tried to add with one() and true/false but the code didn't work (I still green in jquery).
<div class="block"><span>Video below</span></div>
<div class="block video-block">
<video class="video" loop="loop" width="640" controls="controls" muted>
<source src="http://denis-creative.com/wp-content/uploads/2018/01/video.mp4" type="video/mp4" />
<source src="http://denis-creative.com/wp-content/uploads/2018/01/video.ogv" type="video/ogv" />
<source src="http://denis-creative.com/wp-content/uploads/2018/01/video.webm" type="video/webm" />
</video>
</div>
<div class="block"><span>Video above</span></div>
.block{
height: 100vh;
font-size: 60px;
text-align: center;
display: flex;
}
.block > *{
margin: auto;
display: inline-block;
max-width: 100%;
}
// Plugin isInViewport
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(require("jquery"),require("window")):"function"==typeof define&&define.amd?define("isInViewport",["jquery","window"],n):n(e.$,e.window)}(this,function(e,n){"use strict";function t(n){var t=this;if(1===arguments.length&&"function"==typeof n&&(n=[n]),!(n instanceof Array))throw new SyntaxError("isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions");return n.forEach(function(n){"function"!=typeof n?(console.warn("isInViewport: Argument(s) passed to .do/.run should be a function or an array of functions"),console.warn("isInViewport: Ignoring non-function values in array and moving on")):[].slice.call(t).forEach(function(t){return n.call(e(t))})}),this}function o(n){var t=e("<div></div>").css({width:"100%"});n.append(t);var o=n.width()-t.width();return t.remove(),o}function r(t,i){var a=t.getBoundingClientRect(),u=a.top,c=a.bottom,f=a.left,l=a.right,d=e.extend({tolerance:0,viewport:n},i),s=!1,p=d.viewport.jquery?d.viewport:e(d.viewport);p.length||(console.warn("isInViewport: The viewport selector you have provided matches no element on page."),console.warn("isInViewport: Defaulting to viewport as window"),p=e(n));var w=p.height(),h=p.width(),v=p[0].toString();if(p[0]!==n&&"[object Window]"!==v&&"[object DOMWindow]"!==v){var g=p[0].getBoundingClientRect();u-=g.top,c-=g.top,f-=g.left,l-=g.left,r.scrollBarWidth=r.scrollBarWidth||o(p),h-=r.scrollBarWidth}return d.tolerance=~~Math.round(parseFloat(d.tolerance)),d.tolerance<0&&(d.tolerance=w+d.tolerance),l<=0||f>=h?s:s=d.tolerance?u<=d.tolerance&&c>=d.tolerance:c>0&&u<=w}function i(n){if(n){var t=n.split(",");return 1===t.length&&isNaN(t[0])&&(t[1]=t[0],t[0]=void 0),{tolerance:t[0]?t[0].trim():void 0,viewport:t[1]?e(t[1].trim()):void 0}}return{}}e="default"in e?e.default:e,n="default"in n?n.default:n,/**
* #author Mudit Ameta
* #license https://github.com/zeusdeux/isInViewport/blob/master/license.md MIT
*/
e.extend(e.expr[":"],{"in-viewport":e.expr.createPseudo?e.expr.createPseudo(function(e){return function(n){return r(n,i(e))}}):function(e,n,t){return r(e,i(t[3]))}}),e.fn.isInViewport=function(e){return this.filter(function(n,t){return r(t,e)})},e.fn.run=t});
//# isInViewport
// Play Video
$(function() {
var $video = $('.video');
var $window = $(window);
$window.scroll(function() {
if ($video.is(":in-viewport")) {
$video[0].play();
} else {
$video[0].pause();
}
});
});

You could add a var to check if the video is still playing (for example is_playing) and check it with an inner if:
$(function() {
var $video = $('.video');
var $window = $(window);
var is_playing = false;
$window.scroll(function() {
if ($video.is(":in-viewport")) {
if (!is_playing) {
is_playing = true;
$video[0].play();
}
} else {
$video[0].pause();
}
});
});

HTML5 video full screen not populate on android browser on mobile view

I am trying to open a video in full screen on a mobile browser.
The video is showing just fine, but when I click the "full screen" button on the video, only the sound is playing, without the video nor the controls showing.
Could anyone please help me ?
You can find my HTML code below :
<div class = "container">
<div class = "row">
<div class = "col-md-12">
<p class="new-txt-styl-mob">Video Title</p>
<video class = "ved-sttng-mob" controls id = "control1" src = "video1.mp4" type="video/mp4" >
</div>
</div>
</div>
Here is my JavaScript code :
var myVideo;
window.onload = function()
{
myVideo = document.getElementById("control1");
myVideo.load();
myVideo.addEventListener("webkitfullscreenchange", setFullScreenMode);
}
function setFullScreenMode()
{
if(myVideo.requestFullscreen) {
myVideo.requestFullscreen();
} else if (myVideo.webkitRequestFullscreen) {
myVideo.webkitRequestFullscreen();
} else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
} else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
}
And, finally, my CSS code :
.ved-sttng-mob {
width: 100%;
height: auto;
}
.ved-sttng-mob:-webkit-full-screen {
width: 100%;
height: auto;
}

You could try to use allowfullscreen like this
<video class = "ved-sttng-mob" controls id = "control1" src = "video1.mp4" type="video/mp4" allowfullcreen="true">

How can I play HTML5 video after addEventListener resets video?

How can I make this video play again after it resets using the custom function "resetVideo"?
Everything resets back to the start of the video and displays the poster image, but when I click the play button, nothing plays.
<video id="hero-video" width="100%" preload="auto" style="visibility: visible; width: 100%;" poster="http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png">
<source src="http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv" type="video/ogg codecs='theora, vorbis'">
<source src="http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm codecs='vp8, vorbis'">
<source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4 codecs='avc1.42E01E, mp4a.40.2'">
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="play" onclick="vidplay()">></button>
</div>
<div class="banner-box">
<h1>Headline</h1>
<p>copy</p>
link
</div>
<script type="text/javascript">
var video = document.getElementById("hero-video");
var button = document.getElementById("play");
var bannerContent = document.getElementById("video-ad-banner");
setTimeout(function(){ $(bannerContent).fadeOut(); video.play();}, 5000);
video.addEventListener("ended", resetVideo, false);
function vidplay() {
if (video.paused) {
video.play();
button.textContent = "||";
$(bannerContent).fadeOut();
} else {
video.pause();
button.textContent = ">";
$(bannerContent).fadeIn();
}
}
function resetVideo() {
this.src = this.src;
video.currentTime = 0;
$(bannerContent).fadeIn();
}
function restart() {
video.currentTime = 0;
}
</script>

JAVASCRIPT audio application : Button does not change according to device

This is a html embed audio player with simple controls . i made this as an addon for my website.
As autoplay is not supported in mobile browsers . The play/pause button changes according to device
ie: Play button shows up in mobile, Pause button shows up on pc's
The mobile side of the player works perfectly. But the pc side of it starts with the play button even though audio is playing in the background. ie. Else condition doesnt work
If the error isnt clear please copy paste the code here and see : www.htmledit.squarefree.com
<head>
<script>
var playing = true;
if (/Android|iPhone|iPad|Mobile|Mobi|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
playing = false;
}
<!-- THIS ELSE DOES NOT WORK . IT IS SUPPOSED TO CHANGE THE ICON TO PAUSE FROM PRE DEFINED PLAY ICON-->
else{
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII=";
}
function EvalSound(soundobj) {
var thissound = document.getElementById(soundobj);
if (!playing) {
thissound.play();
playing = true;
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII=";
} else if (playing) {
thissound.pause();
playing = false;
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC";
}
}
</script>
</head>
<body>
<a href="javascript:null()" onClick="EvalSound('sound1'); return false; ">
<!-- PRE DEFINED PLAY ICON IS BELOW -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC" id="sound_icon" name="Sound" width="" height="" title="Background Music Controls" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="https://audio.clyp.it/3fnnuaiw.mp3?Expires=1488659248&Signature=01NkRScwYO4XaJO46JuNzPRR6cYQfcL5~rJzAu-gIoNoXkiMVZwazwT--amuqYvreLCSRFnFAFUvwR3v9Xaq1iB4~OmKSWqtF9mSm-CUB2Moqtie8wpGIRxTAkDHnfhN0sy45sINjwFP2xyVumld78USPuCBfNU3kgux69YG-yA_&Key-Pair-Id=APKAJ4AMQB3XYIRCZ5PA" controls preload="auto" autobuffer autoplay>
</body>

When loading the page the script part at the headers is running before the elements where created at the DOM. See this other answer to better understand how it works.
To have it working you can load the script at the end:
<body>
<a href="javascript:null()" onClick="EvalSound('sound1'); return false; ">
<!-- PRE DEFINED PLAY ICON IS BELOW -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC" id="sound_icon" name="Sound" width="" height="" title="Background Music Controls" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="https://audio.clyp.it/3fnnuaiw.mp3?Expires=1488659248&Signature=01NkRScwYO4XaJO46JuNzPRR6cYQfcL5~rJzAu-gIoNoXkiMVZwazwT--amuqYvreLCSRFnFAFUvwR3v9Xaq1iB4~OmKSWqtF9mSm-CUB2Moqtie8wpGIRxTAkDHnfhN0sy45sINjwFP2xyVumld78USPuCBfNU3kgux69YG-yA_&Key-Pair-Id=APKAJ4AMQB3XYIRCZ5PA" controls preload="auto" autobuffer autoplay>
<script>
var playing = true;
var flag = false;
if (/Android|iPhone|iPad|Mobile|Mobi|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
playing = false;
} else{
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII=";
}
function EvalSound(soundobj) {
var thissound = document.getElementById(soundobj);
if (!playing) {
thissound.play();
playing = true;
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII=";
} else if (playing) {
thissound.pause();
playing = false;
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC";
}
}
</script>
</body>
or load after window is loaded with window.onload
<head>
<script>
var playing = true;
var flag = false;
window.onload = function () {
if (/Android|iPhone|iPad|Mobile|Mobi|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
playing = false;
} else {
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII=";
}
}
function EvalSound(soundobj) {
var thissound = document.getElementById(soundobj);
if (!playing) {
thissound.play();
playing = true;
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAuUlEQVRoQ+2YwQ2AIAxFYRwncS3WchLH0YN6IWp/QhtCeJ5rgfd/W0JOg3958P0nDtBbQRRAgUYCWKgRYPPv8yiwlO1QcO1l/YXilefZi6yA18JeeTjAl52w0E3GAoGFsJDRk7FQDcirf3vloYgpYor4IsBlrnaC1b/pQhUxLISFPtqpVUtMYiYxk5hJ/O4Bq3swiaedxMq7aI8Y+S7UY3PKmhxAoRQZgwKRdJXcKKBQioxBgUi6Su4TGV3gMZ8LoyUAAAAASUVORK5CYII=";
} else if (playing) {
thissound.pause();
playing = false;
document.getElementById('sound_icon').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC";
}
}
</script>
</head>
<body>
<a href="javascript:null()" onClick="EvalSound('sound1'); return false; ">
<!-- PRE DEFINED PLAY ICON IS BELOW -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABdElEQVRoQ+2YuxWCQBBFl0Rb0TJM9NiFdoAVOHSAHWAZZtoFoXagGZHroOghMHA+++G4JCT7mTvv8VjIzMCvbOD1mwQQWsGkQFJA2IFkIWEDxdP/V4EJHI7G3Fc1LM/iNgoWYCswhYNt97WZgcaOdmeYXQV1sKeKAbqdrwiS19vFnl0Jc6IWwHN7ayzayhZoK7z7uVQB3iUjSNWY8caHrZwA9GxVoq0Kl1q4BHjbClPKrl3ZyjlAz1bt89GCqMauN4APiHLsegfQjt1QAGqxGxRAI3ajAJDEbkwArNiNDgCj9oJv8vaU+9NxJBoAPNreUIKyhgVQ3txRAGDx+8aMcs7ZKSgAFn7CjyL41S7flAkC8LJLltcwryh2iQIAiy/QLiXHLkEBOruof0N7sBAtFqmWcgbAjcUoACSxGBRAIxaDAGjGoncA7Vj0BjD4X4vUTrkaz45RVwVR100A1I5pj08KaHeUul5SgNox7fFJAe2OUtd7AO2p3zFrWh4hAAAAAElFTkSuQmCC" id="sound_icon" name="Sound" width="" height="" title="Background Music Controls" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="https://audio.clyp.it/3fnnuaiw.mp3?Expires=1488659248&Signature=01NkRScwYO4XaJO46JuNzPRR6cYQfcL5~rJzAu-gIoNoXkiMVZwazwT--amuqYvreLCSRFnFAFUvwR3v9Xaq1iB4~OmKSWqtF9mSm-CUB2Moqtie8wpGIRxTAkDHnfhN0sy45sINjwFP2xyVumld78USPuCBfNU3kgux69YG-yA_&Key-Pair-Id=APKAJ4AMQB3XYIRCZ5PA" controls preload="auto" autobuffer autoplay>
</body>

How to stop one audio player from playing when I click another - javascript

I am creatinga page specifically for an ipad.
I have 12 audio players on a page. They are all working fine but if you click a second player the first one continues to play. I've seen this question asked before but none of the answers are specific to my code.
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
if (thissound.paused)
thissound.play();
else
thissound.pause();
thissound.currentTime = 0;
}
</script>
The players themselves:
<a href="card3_ipad.php?card=funny" onClick="EvalSound('song1'); return true;"
target="player"><IMG SRC="images/funnytab.gif" BORDER=0 WIDTH=128 HEIGHT=29>
</A>
<audio id="song1" style="display: none; width: 0px; height: 0px;"
src="mp3examples/funnyauto.mp3" controls preload="auto" autobuffer>
then another player is:
<a href="card3_ipad.php?card=country" onClick="EvalSound('song2'); return true;"
target="player"><IMG SRC="images/countrytab.gif" BORDER=0 WIDTH=128 HEIGHT=29>
</A>
<audio id="song2" style="display: none; width: 0px; height: 0px;"
src="mp3examples/countryauto.mp3" controls preload="auto" autobuffer>
Any help would be massively appreciated!
Cheers
Tom

use another variable which hold current active player
<script>
var currentPlayer;
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
if(currentPlayer && currentPlayer != thissound) {
currentPlayer.pause();
}
if (thissound.paused)
thissound.play();
else
thissound.pause();
thissound.currentTime = 0;
currentPlayer = thissound;
}
</script>

Categories

Resources