Reputation: 326

Show current volume of html5 audio with javascript?

I have coded in PHP/JavaScript and styled (CSS) to my liking a html5 audio soundboard, this scans a dir for mp3's, puts the found files in a PHP array and then displays 'an instance' of my custom-styled 'player' for each file it finds.

I have included volume up and down buttons for this and would like to know if it is possible to display the current volume value (probably using javascript) when the volume is being changed, or even all the time but updating as it's changed?

I have done a fair old amount of searching for answers to this question but can only find answers for turning the volume up and down or setting an initial value etc, nothing for actually showing its current value, maybe it's the phrases I'm using to search (I've sure tried to word the searches in as many different ways as possible) but try as I might I can't seem to find any example code for me to try on this one so any help would be appreciated.

Here is the full current code..

<head>
<meta id="setViewport" name="viewport" content="width=device-width, initial-scale=0.6, user-scalable=no">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type="text/javascript" src="date_time.js"></script>
<script>
if (screen.width > 590) {
    var mvp = document.getElementById('setViewport');
    mvp.setAttribute('content','width=980 user-scalable=no');
}
</script>
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="true" />
<meta name="google" content="notranslate" />

<style>

body {
  padding: 0px;
  background-color: black;
  color: white;

}


.singlesoundcontainer {
display:inline-block;
border: 3px solid #44c767;
border-radius: 20px;
background-color: #2b2d2f;
opacity: 0.8;
padding:5px;
margin-right:8px;
margin-bottom:18px;
width:200px;
text-align: center;
font-weight:600;
-webkit-box-shadow: 3px 3px 4px 1px #2a592a;
-moz-box-shadow: 3px 3px 4px 1px #2a592a;
box-shadow: 3px 3px 4px 1px #2a592a;    
}

.playbuttons {
    box-shadow:inset 0px 1px 0px 0px #a4e271;
    background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
    background-color:#89c403;
    border-radius:26px;
    border:1px solid #74b807;
    cursor:pointer;
    padding: 6px 8px;
    display: inline-block;
    margin-right: 6px;
}
.playbuttons:hover {
    background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
    background-color:#77a809;
}
.playbuttons:active {
    position:relative;
    top:1px;
}
.stopbuttons {
    box-shadow: inset 0px 1px 0px 0px #8a2a21;
    background: linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
        background-color: rgba(0, 0, 0, 0);
    background-color: #c62d1f;
    border-radius: 26px;
    border: 1px solid #d02718;
    float: right;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 20px 2px 20px 0px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #810e05;
    white-space: normal;
    word-wrap: break-word;
    width: 98px;
    height: 82px;

}
.stopbuttons:hover {
    background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
    background-color:#f24437;
}
.stopbuttons:active {
    position:relative;
    top:1px;
}

.bottom_buttonwrapper {
    text-align: center;
    margin-top:8px;
    display:inline-block;
}

.playertime {
box-shadow: inset 0px 2px 2px 0px #fff;
background: linear-gradient(to bottom, #222 5%, #626262 100%);
background-color: rgba(0, 0, 0, 0);
background-color: #242415;
border-radius: 8px;
border: 1px solid #000;
display:inline-block;
cursor: default;
color: #ffffff;
font-family: Arial;
font-size: 32px;
font-weight: bold;
padding: 0px 8px;
margin-left: 6px;
text-decoration: none;
text-shadow: 0px 3px 0px #000;
}

.pause_button {
    box-shadow: inset 0px 1px 0px 0px #000;
    background: linear-gradient(to bottom, #cfff4a 5%, #D0BA00 100%);
    background-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    background-color: #e8d900;
    border-radius: 26px;
    border: 1px solid #000;
    display: inline-block;
    cursor: pointer;
    padding: 4px 36px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #810e05;
    margin-top: 8px;
    margin-left: 10px;
}
.pause_button:hover {
    background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
    background-color:#f24437;
}
.pause_button:active {
    background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
    background-color:#f24437;
}

.vol_buttons {
    box-shadow: inset 0px 1px 0px 0px #FDFAFF;
    background: linear-gradient(to bottom, #E8E8E8 5%, #5E5E5E 100%);
        background-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    background-color: #AEAEAE;
    border-radius: 16px;
    border: 1px solid #000;
    cursor: pointer;
    color: black;
    display: inline-block;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
padding: 8px 26px;
    margin-right: 4px;
    margin-left: 4px;

}
</style>
</head>

<body>
<div id="container" style="width:99%; max-width:99%;">
<span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script> <br>
<?php
$files = scandir('audio');
$files = array_slice($files, 2);
$files = array_combine(range(1, count($files)), $files);
foreach ($files as $id => $file) {
//ID for for targeting by id
//echo $id;

//file url to feed to player
//echo $file;

//trimmed file url to act as title (removes first 3 and last 4 chars so '01 name.mp3' becomes 'name')
//echo substr($file, 3, -4);


{ ?>
<div class="singlesoundcontainer"> <svg viewBox="-4 0 180 24"><text style="font: bold; fill: white;" x="0" y="15"><?php echo substr($file, 3, -4); ?></text></svg>
  <audio id="player<?php echo $id;?>" src="audio/<?php echo $file; ?>"></audio>
  <button class="playbuttons" ontouchstart="document.getElementById('player<?php echo $id;?>').play()" onclick="document.getElementById('player<?php echo $id;?>').play()"><img style="padding-left:5px; width: 71px; height: 70px;" alt="Media Play Button" src="images/play_button.png"></button> 
  <button class="stopbuttons"  ontouchstart="document.getElementById('player<?php echo $id;?>'); player<?php echo $id;?>.pause(); player<?php echo $id;?>.currentTime = 0;" onclick="document.getElementById('player<?php echo $id;?>'); player<?php echo $id;?>.pause(); player<?php echo $id;?>.currentTime = 0;">Stop/Reload <small><small>+Show Track Length</small></small></button><br>

   <button class="playertime"><span id="time_mins<?php echo $id;?>">0:00</span><span id="time_secs<?php echo $id;?>" style="colour:white;"></span></button>
   <button class="pause_button" ontouchstart="document.getElementById('player<?php echo $id;?>').pause()" onclick="document.getElementById('player<?php echo $id;?>').pause()"><img style="padding-left:0px; height: 30px;" alt="Media Play Button" src="images/pause_button2.png"></button>
  <div class="bottom_buttonwrapper">
  <button class="vol_buttons" ontouchstart="document.getElementById('player<?php echo $id;?>').volume -= 0.1" onclick="document.getElementById('player<?php echo $id;?>').volume -= 0.01">Vol -</button>
  <button class="vol_buttons" ontouchstart="document.getElementById('player<?php echo $id;?>').volume += 0.1" onclick="document.getElementById('player<?php echo $id;?>').volume += 0.01">Vol +</button></div>
</div>
<script>
// Get the audio element with id from variable
var aud<?php echo $id;?> = document.getElementById('player<?php echo $id;?>');
// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud<?php echo $id;?>.ontimeupdate = function() {myFunction<?php echo $id;?>()};
function myFunction<?php echo $id;?>() {
  // Display the current position of the audio in a p element with id from var
  var seconds = Math.round((aud<?php echo $id;?>.duration - aud<?php echo $id;?>.currentTime) %60);
  document.getElementById('time_mins<?php echo $id;?>').innerHTML = Math.floor((aud<?php echo $id;?>.duration - aud<?php echo $id;?>.currentTime) /60) + ":";
  document.getElementById('time_secs<?php echo $id;?>').innerHTML = String("0" + seconds).slice(-2);

}
</script>
<?php }  
}
?>
</div>
</body>

(Tips and pointers about my current code are welcome but bear in mind I'm very new and amateur at this so please be nice!) PS: I know i should probably move the CSS to its own .css file and not use negative margins and depreciated code too! :-/

Upvotes: 0

Answers (1)

Jacob Tobiasz

Reputation: 458

Yes you can. There's volumechanged event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event) Example via MDN:

const video = document.querySelector('video');

video.addEventListener('volumechange', (event) => {
  console.log('The volume changed.');
});

Also you can read current volume by reading a property. Let's say you have a player with id 'myPlayer'. To receive a current volume just use

document.getElementById("myPlayer").volume

Without = sign it returns a value instead setting it.

Upvotes: 1

Show current volume of html5 audio with javascript?

Answers (1)

Related Questions