Cette question peut sembler stupide, mais je ne peux vraiment pas savoir quel est le problème. Au début, j'ai un fichier .js uniquement avec cette fonction qui ajoute un fichier audio à la page:Pourquoi ce code fonctionne-t-il sur un fichier séparé mais pas en ligne?
function addAudio(id_name, audio_filepath) {
var audio = $('<audio />')
.prop('id', 'audio' + id_name)
.prop('src', audio_filepath)
.text("Your reader doesn't support audio.");
$('body').append(audio);
$('#' + id_name).click(function() {
audio.get(0).play();
});
}
Et il est d'être appelé dans le code HTML comme ceci:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<!-- some content here -->
<button id="test">Play</button>
<!-- reference to lib containing jquery -->
<script type="text/javascript" src="js/lib.min.js"></script>
<!-- script where the function addAudio resides -->
<script type="text/javascript" src="js/add-audio.js"></script>
<script type="text/javascript">
$().ready(function() {
addAudio('test', 'audio/01-test.wav');
});
</script>
</body>
</html>
Et ça fonctionne bien. Le problème est lorsque j'essaie de sortir la fonction du fichier et de la mettre en ligne dans la balise de script. Dans ce cas, lorsque je clique sur le bouton, la console imprime Uncaught TypeError: Cannot read property 'play' of undefined.
C'est le code modifié:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<!-- some content here -->
<button id="test">Play</button>
<!-- reference to lib containing jquery -->
<script type="text/javascript" src="js/lib.min.js"></script>
<script type="text/javascript">
function addAudio(id_name, audio_filepath) {
var audio = $('<audio />')
.prop('id', 'audio' + id_name)
.prop('src', audio_filepath)
.text("Your reader doesn't support audio.");
$('body').append(audio);
$('#' + id_name).click(function() {
audio.get(0).play();
});
}
$().ready(function() {
addAudio('test', 'audio/01-test.wav');
});
</script>
</body>
</html>
essayer d'isoler l'erreur, j'ai découvert que lorsque la fonction est dans le fichier .js, la audio variable est un objet jquery [audio#audiotest], mais lorsque la fonction est en ligne, cette variable est l'objet n.fn.init {}.
Pourquoi cela se produit-il?
EDIT
J'ai remarqué que cela se produit parce qu'il est dans un fichier xhtml (je fais un ebook au format EPUB3). Si je change le fichier à html il fonctionne à nouveau. Mais c'est étrange, car les tags audio sont supportés dans xhtml (vous pouvez vérifier la spécification ici: http://www.idpf.org/accessibility/guidelines/content/xhtml/audio.php), et comme je l'ai dit, cela fonctionne si la fonction est dans un fichier séparé. Alors pourquoi pas en ligne?
que fait-il afficher dans votre console de navigateur? –
Lorsque le code est dans le fichier séparé, l'audio est joué normalement. Lorsque le code est en ligne, la console indique 'Uncaught TypeError: Impossible de lire la propriété 'play' de undefined' –
Il y a sur ' dans le second ... – IMTheNachoMan