音频范围音量滑块Javascript/HTML5
Audio range volume slider Javascript/HTML5
这是我学习如何编码的第一周,在如何将滑块连接到音量上遇到了一些HTML5音频问题。
我的代码如下,任何建议都是赞赏的。我不确定的主要部分是我的setVolume()
脚本;我只是想不明白这是怎么回事。
<!DOCTYPE html>
<head>
<title>Slider + Play/Pause</title>
<script>
"use strict";
/*function playMusic() {
document.getElementById("mediaClip").play();
}*/
var mediaClip = document.getElementbyId("mediaClip");
var volume1 = document.getElementbyId("volume1");
function playPause() {
var mediaClip = document.getElementById("mediaClip");
if (mediaClip.paused) {
mediaClip.play();
} else {
mediaClip.pause();
}
}
function change() {
var button1 = document.getElementById("button1");
if (button1.value==="Play") button1.value = "Pause";
else button1.value = "Play";
}
function setVolume() {
var mediaClip = document.getElementById("mediaClip").value;
document.getElementById("mediaClip").value = mediaClip;
mediaClip.volume = document.getElementById("volume1").value;
}
</script>
</head>
<body>
<audio id="mediaClip" src="takeMeToChurchHozier.mp3" controls>
<p>Your browser does not support the audio element</p>
</audio>
<br/>
<input onclick="change();playPause()" type="button" value="Play" id="button1">
<br/>
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'>
</body>
</html>
在您的setVolume()
函数中,将代码更改为:
var mediaClip = document.getElementById("mediaClip");
mediaClip.volume = document.getElementById("volume1").value;
解释:
我将第一行代码从var mediaClip = document.getElementById("mediaclip").value;
更改为var mediaClip = document.getElementById("mediaClip");
,因为要更改元素的属性或属性,您需要使用此语法element.property
而不是element.value.property
。
我完全删除了第二行,因为它既没有任何意义,也不需要在那里。想想看,为什么要把元素的值赋给元素的当前值呢?
你的第三行(在我的代码中,它是第二行)是不变的
相关文章:
- JavaScript HTML5画布未显示
- 在Javascript HTML5+Canvas中处理精灵鼠标点击的最佳方式
- Javascript HTML5 更改图标用于 fa-play
- Javascript/Html5 Download zip from url
- JavaScript/HTML5音频:在Android Chrome中播放用户通过文件选择器加载的mp3文件
- 在Javascript HTML5 Canvas中旋转绘制的圆圈
- 在 JavaScript/HTML5 中显示 3D 模型
- Javascript/HTML5 - 更改鼠标事件上的文本
- Javascript html5 视频在特定时间添加/删除类
- 运动跟踪 JavaScript = HTML5/canvas 游戏输入/控制
- 如何提高javascript html5程序的整体性能:是否可以在两台计算机上同步两个版本
- 人脸检测 javascript/html5/flash
- 了解如何在javascript/HTML5/NodeJS中实现客户端-服务器-客户端基础结构
- javascript html5 drawImage 带有来自不同域的图像
- 用 Javascript/HTML5 编写的 Windows 应用商店应用程序的代码度量选项
- JavaScript/HTML5/jQuery 拖放上传 - “未捕获的类型错误:无法读取未定义的属性'文件
- Javascript/HTML5使用图像填充画布
- JavaScript/HTML5 addEventListener() 不使用
- 表杂乱无章的问题.Javascript HTML5.
- JavaScript/HTML5 从表单中获取 URL 并在新的 Window iframe 中打开它