在html5的音频播放场景中，play函数是audio元素的内置方法，用于触发音频的播放操作，但该函数本身仅负责启动播放流程，并不包含音量设置的参数。要实现音量调节，需要配合audio元素的volume属性或者muted属性来完成相关操作。
play函数与音量属性的基础关系
首先需要明确audio元素的核心属性和方法的作用范围：
play()：audio元素的方法，调用后会返回Promise对象，用于启动音频播放，没有参数可以设置音量。volume：audio元素的属性，取值为0到1之间的浮点数，0代表静音，1代表最大音量，修改该属性会直接改变当前音频的播放音量。muted：audio元素的属性，取值为布尔值，true代表静音，false代表取消静音，优先级高于volume属性。
基础音量调节实现步骤
要实现播放时设置音量的效果，正确的流程是先设置volume属性，再调用play函数，具体步骤如下：
1. 创建audio元素
首先在html中创建audio标签，指定音频资源，示例如下：
<audio id="myAudio" src="https://ipipp.com/audio/test.mp3">您的浏览器不支持audio标签</audio>
2. 编写播放并设置音量的逻辑
通过JavaScript获取audio元素，先设置volume属性，再调用play函数，示例代码如下：
// 获取audio元素
const audioDom = document.getElementById('myAudio');
// 设置音量为50%，取值范围0-1
audioDom.volume = 0.5;
// 调用play函数启动播放
audioDom.play().then(() => {
console.log('音频播放成功');
}).catch((err) => {
console.log('音频播放失败，错误信息：', err);
});
动态调节音量的实现方式
如果需要在播放过程中动态调整音量，同样是通过修改volume属性实现，不需要重新调用play函数，示例如下：
// 获取audio元素
const audioDom = document.getElementById('myAudio');
// 播放音频
audioDom.play();
// 定义一个调整音量的函数
function changeVolume(newVolume) {
// 限制音量取值在0到1之间
if (newVolume < 0) newVolume = 0;
if (newVolume > 1) newVolume = 1;
audioDom.volume = newVolume;
console.log('当前音量已设置为：', newVolume);
}
// 调用函数设置音量为80%
changeVolume(0.8);
常见问题说明
注意：部分浏览器要求play函数的调用必须由用户主动交互触发（比如点击事件），否则会抛出播放失败的错误，此时音量设置不受影响，只是播放操作被拦截。
另外，如果设置了muted属性为true，即使volume设置为1，音频也会处于静音状态，需要先设置audioDom.muted = false才能恢复音量控制。
完整示例演示
下面是一个包含播放按钮和音量滑块的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5音频音量调节示例</title>
</head>
<body>
<audio id="audioPlayer" src="https://ipipp.com/audio/demo.mp3"></audio>
<button id="playBtn">播放音频</button>
<div>
<label for="volumeRange">音量调节：</label>
<input type="range" id="volumeRange" min="0" max="1" step="0.1" value="0.5">
<span id="volumeText">50%</span>
</div>
<script>
const audioPlayer = document.getElementById('audioPlayer');
const playBtn = document.getElementById('playBtn');
const volumeRange = document.getElementById('volumeRange');
const volumeText = document.getElementById('volumeText');
// 初始化音量
audioPlayer.volume = volumeRange.value;
// 播放按钮点击事件
playBtn.addEventListener('click', () => {
audioPlayer.play().then(() => {
console.log('音频开始播放');
}).catch(err => {
console.log('播放失败：', err);
});
});
// 音量滑块变化事件
volumeRange.addEventListener('input', (e) => {
const vol = parseFloat(e.target.value);
audioPlayer.volume = vol;
volumeText.textContent = `${vol * 100}%`;
});
</script>
</body>
</html>