I'm trying to make a short audio file play when a html checkbox is checked. I'm probably missing something elementary. Here is my code:
<body>
<input type="checkbox" id="cena" onchange="myfunction()"></input><label for="cena"></label>
</label><script>
function myfunction(){
var audio = new audio('rusbtaudio.mp3');
audio.play();
}
</script>
</body>
rusbtaudio.mp3 is in same folder as html file.
I'm trying to make a short audio file play when a html checkbox is checked. I'm probably missing something elementary. Here is my code:
<body>
<input type="checkbox" id="cena" onchange="myfunction()"></input><label for="cena"></label>
</label><script>
function myfunction(){
var audio = new audio('rusbtaudio.mp3');
audio.play();
}
</script>
</body>
rusbtaudio.mp3 is in same folder as html file.
- Never mind the extra </label> – user3774924 Commented Nov 5, 2016 at 17:21
-
1
It should be
new Audio(...)... and you should check for checked, not on change – Andrew Li Commented Nov 5, 2016 at 17:22 -
1
<input>element is self-closing. Usecanplayevent. Instead of creatingnew Audio()at eachchangeevent you can use.load()– guest271314 Commented Nov 5, 2016 at 17:22 - Can you elaborate on that, please? – user3774924 Commented Nov 5, 2016 at 17:24
- I have to excuse myself, my knowledge on javascript is minimal. We havent started on javascript in my IT course yet, and css wasnt capable of this simple task. I'd really appreciate seeing the changes I have to do. – user3774924 Commented Nov 5, 2016 at 17:29
6 Answers
Reset to default 3<input> element is self-closing. Use .load(), canplay event. Substitute new Audio() for new audio()
<body>
<input type="checkbox" id="cena" onchange="myfunction(this)" />
<label for="cena"></label>
<script>
var audio = new Audio('rusbtaudio.mp3');
audio.oncanplay = function() {
if (document.getElementById("cena").checked) this.play()
}
function myfunction(el) {
if (el.checked) {
audio.load();
}
}
</script>
</body>
JavaScript:
var audio = new Audio('rusbtaudio.mp3'),
cenaCheckbox = document.getElementById('cena'),
myfunction = function () {
if (cenaCheckbox.checked) {
audio.play();
}
};
Html:
<input type="checkbox" id="cena" onchange="myfunction();"/>
hello you should try this one
<input type="checkbox" id="cena" onclick="myfunction()"></input><label
for="cena"></label>
</label>
<script>
function myfunction(){
var audio = new Audio('sel.mp3');
audio.play();
}
Your code is almost correct! The only problem is in this line:
new audio('rusbtaudio.mp3');
Just change audio to Audio - check out documentation
Also there some issues with tags, such as redundant </input> and unneeded second </label> but even though it will work.
Your code has the following error Uncaught TypeError: audio is not a constructor, try this code, native JavaScript with HTML5 audio tag
HTML
<body>
<audio id="audio1" hidden="hidden">Canvas not supported</audio>
<input type="hidden" id="audioFile" value="rusbtaudio.mp3" size="60" />
<input type="checkbox" id="playbutton" onclick="togglePlay();">Play
</body>
JavaScript
<script>
// Create a couple of global variables to use.
var audioElm = document.getElementById("audio1"); // Audio element
// Alternates between play and pause based on the value of the paused property
function togglePlay() {
if (document.getElementById("audio1")) {
if (audioElm.paused == true) {
playAudio(audioElm); // if player is paused, then play the file
} else {
pauseAudio(audioElm); // if player is playing, then pause
}
}
}
function playAudio(audioElm) {
// Get file from text box and assign it to the source of the audio element
audioElm.src = document.getElementById('audioFile').value;
audioElm.play();
}
function pauseAudio(audioElm) {
audioElm.pause();
}
</script>
I think it's worth adding a pause function to the checkbox (not all users like background music). I did it
<body>
<input type="checkbox" id="cena" onchange="myfunction(this)" />
<label for="cena"></label>
<script>
var audio = new Audio('rusbtaudio.mp3');
audio.oncanplay = function() {
if (document.getElementById("cena").checked) this.play()
}
function myfunction(el) {
if (el.checked) {
audio.load();
} else {
audio.pause(); //pause audio
}
}
</script>
</body>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744680936a4587619.html
评论列表（0条）