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

【问题标题】：Show current volume of html5 audio with javascript?用javascript显示当前的html5音频音量？
【发布时间】：2020-07-29 23:02:35
【问题描述】：

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

我为此添加了音量增大和减小按钮，并且想知道是否可以在更改音量时显示当前音量值（可能使用 javascript），或者甚至一直显示当前音量值但随着音量的更改而更新?

我已经做了相当多的搜索来寻找这个问题的答案，但只能找到调高和调低音量或设置初始值等的答案，没有实际显示其当前值，也许是短语 I' m 用于搜索（我确实尝试以尽可能多的不同方式对搜索进行措辞），但尽我所能尝试我似乎无法找到任何示例代码供我尝试，所以任何帮助将不胜感激.

这是完整的当前代码..

<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 文件中，而不是也使用负边距和折旧代码！ :-/

【问题讨论】：

标签： javascript php foreach html5-audio

【解决方案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

如果没有= 符号，它会返回一个值而不是设置它。

【讨论】：

完美，感谢您的指点和示例代码，我已经使用 document.getElementById('vol_level').innerHTML = Math.floor(document.getElementById ('player').volume * 10);我需要 Math.floor 来舍入输出和 * 10 所以我得到 0->10 。