Ik probeer een audiobestand te spelen wanneer ik op de knop klik, maar het werkt niet, mijn HTML-code is:
<html>
<body>
<div id="container">
<button id="play">
Play Music
</button>
</div>
</body>
</html>
Mijn JavaScript is:
$('document').ready(function () {
$('#play').click(function () {
var audio = {};
audio["walk"] = new Audio();
audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
audio["walk"].addEventListener('load', function () {
audio["walk"].play();
});
});
});
Ik heb een Fiddle ook dat ook voor.
Antwoord 1, Autoriteit 100%
Welke aanpak?
U kunt audio afspelen met <audio>TAG of <object>OF <embed>.
Lazy laden (laden wanneer je het nodig hebt) Het geluid is de beste aanpak als de grootte klein is. U kunt het audio-element dynamisch maken, wanneer het is geladen, kunt u het starten met .play()en pauzeer deze met .pause().
Dingen die we gebruikten
We zullen canplaygebruiken om ons bestand te detecteren is klaar om te worden afgespeeld.
Er is geen functie .stop()voor audio-elementen. We kunnen ze alleen pauzeren. En als we vanaf het begin van het audiobestand willen beginnen, veranderen we de .currentTimeervan. We zullen deze regel gebruiken in ons voorbeeld audioElement.currentTime = 0;. Om de functie .stop()te bereiken, pauzeren we eerst het bestand en stellen vervolgens de tijd opnieuw in.
Misschien willen we de lengte van het audiobestand en de huidige speelduur weten. We hebben .currentTimehierboven al geleerd, om de lengte ervan te leren gebruiken we .duration.
Voorbeeldgids
- Als het document klaar is, hebben we dynamisch een audio-element gemaakt
- We stellen de bron in met de audio die we willen afspelen.
- We hebben de gebeurtenis ‘beëindigd’ gebruikt om het bestand opnieuw te starten.
Als de huidige tijd gelijk is aan de duur ervan, stopt het audiobestand
spelen. Telkens wanneer uplay()gebruikt, begint het vanaf het begin.
- We hebben de gebeurtenis
timeupdategebruikt om de huidige tijd bij te werken wanneer de audio.currentTimeverandert. - We hebben de gebeurtenis
canplaygebruikt om informatie bij te werken wanneer het bestand klaar is om te worden afgespeeld. - We hebben knoppen gemaakt om af te spelen, te pauzeren en opnieuw op te starten.
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
audioElement.addEventListener('ended', function() {
this.play();
}, false);
audioElement.addEventListener("canplay",function(){
$("#length").text("Duration:" + audioElement.duration + " seconds");
$("#source").text("Source:" + audioElement.src);
$("#status").text("Status: Ready to play").css("color","green");
});
audioElement.addEventListener("timeupdate",function(){
$("#currentTime").text("Current second:" + audioElement.currentTime);
});
$('#play').click(function() {
audioElement.play();
$("#status").text("Status: Playing");
});
$('#pause').click(function() {
audioElement.pause();
$("#status").text("Status: Paused");
});
$('#restart').click(function() {
audioElement.currentTime = 0;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h2>Sound Information</h2>
<div id="length">Duration:</div>
<div id="source">Source:</div>
<div id="status" style="color:red;">Status: Loading</div>
<hr>
<h2>Control Buttons</h2>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="restart">Restart</button>
<hr>
<h2>Playing Information</h2>
<div id="currentTime">0</div>
</body>Antwoord 2, autoriteit 37%
$("#myAudioElement")[0].play();
Het werkt niet met $("#myAudioElement").play()zoals je zou verwachten. De officiële reden is dat het opnemen ervan in jQuery een play()-methode zou toevoegen aan elk afzonderlijk element, wat onnodige overhead zou veroorzaken. Dus in plaats daarvan moet je ernaar verwijzen door zijn positie in de array van DOM-elementen die je ophaalt met $("#myAudioElement"), oftewel 0.
Dit citaat is afkomstig van een bug die hierover is ingediend, die werd gesloten als “feature /wontfix”:
Om dat te doen, moeten we een jQuery-methodenaam toevoegen voor elke DOM-elementmethodenaam. En natuurlijk zou die methode niets doen voor niet-media-elementen, dus het lijkt niet alsof het de extra bytes waard zou zijn die het zou kosten.
Antwoord 3, autoriteit 15%
Voor iedereen die het volgt, ik heb gewoon het antwoord van Ahmet overgenomen en de jsfiddle van de oorspronkelijke vrager hier, ter vervanging van:
audio.mp3
voor
http://www.uscis.gov/files/nativedocuments/Track%2093.mp3
linken in een gratis beschikbare mp3 van internet. Bedankt voor het delen van de gemakkelijke oplossing!
Antwoord 4, autoriteit 8%
Ik heb hier een mooie en veelzijdige oplossing met een fallback:
<script type="text/javascript">
var audiotypes={
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function ss_soundbits(sound){
var audio_element = document.createElement('audio')
if (audio_element.canPlayType){
for (var i=0; i<arguments.length; i++){
var source_element = document.createElement('source')
source_element.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
source_element.setAttribute('type', audiotypes[RegExp.$1])
audio_element.appendChild(source_element)
}
audio_element.load()
audio_element.playclip=function(){
audio_element.pause()
audio_element.currentTime=0
audio_element.play()
}
return audio_element
}
}
</script>
Hierna kunt u zoveel audio initialiseren als u wilt:
<script type="text/javascript" >
var clicksound = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
var plopsound = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>
Nu kunt u het geïnitialiseerde audio-element waar u ook wilt bereiken met Simple Event-oproepen als
onclick="clicksound.playclip()"
onmouseover="plopsound.playclip()"
Antwoord 5, Autoriteit 4%
Hoe zit het met:
$('#play').click(function() {
const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
audio.play();
});
Antwoord 6, Autoriteit 3%
Dit is wat ik gebruik met jQuery:
$('.button').on('click', function () {
var obj = document.createElement('audio');
obj.src = 'linktoyourfile.wav';
obj.play();
});