使用 javascript 显示 html5 音频的当前音量？

Question

我已经在 PHP/JavaScript 中编码并根据自己的喜好设置了样式 (CSS) html5 音频音板，这会扫描 mp3 的目录，将找到的文件放在 PHP 数组，然后为它找到的每个文件显示我自定义样式 'player' 的 'an instance'。

我为此添加了音量增大和减小按钮，想知道是否可以在更改音量时显示当前音量值（可能使用 javascript），甚至所有时间但随着它的变化而更新？

我已经搜索了很久这个问题的答案，但只能找到调高和调低音量或设置初始值等的答案，没有实际显示其当前值的答案，也许是短语我正在使用搜索（我确实尝试用尽可能多的不同方式来表达搜索）但是我可能会尝试我似乎无法找到任何示例代码让我尝试这个所以任何帮助都会不胜感激。

这是完整的当前代码..

<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>

（欢迎提供有关我当前代码的提示和指示，但请记住，我在这方面是新手和业余爱好者，所以请保持友善！）PS：我知道我可能应该移动 CSS 到它自己的 .css 文件，也不要使用负边距和折旧代码！ :-/

Answer 1

是的，你可以。有 volumechanged 事件 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event) 来自 MDN 的示例：

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

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

您还可以通过阅读属性来阅读当前卷。假设您有一个 ID 为 'myPlayer' 的玩家。要接收当前音量，只需使用

document.getElementById("myPlayer").volume

没有 = 签名 returns 一个值而不是设置它。

使用 javascript 显示 html5 音频的当前音量？

Show current volume of html5 audio with javascript?

javascript

php

foreach

html5-audio