当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Can't access DOM from SCM Music Player

问题描述:

I am building a website using SCM Music Player (an open source web player), and I would like to use the "finish" callback to modify my DOM when the music stops. I can access this callback and execute a "console.log()", but I can't access DOM... I've noticed that this script uses Knockout library, but I don't know how it works and if it is necessary... Here is my code from scm.js:

finish = function(){

//repeat one start again, otherwise next song

if(repeatMode()==2) start();

else {

console.log('Next son de scm.js :');

var div = ko.observable($('#ajouterSon').attr('role'));

console.log('Div: ' + div);

next();

}

};

And the kind of changes I do when I play a song :

$('.musiqueLink').on('click', function(event) {

console.log('clic musique - last id = ' + lastidmusique);

event.preventDefault();

if(lastidmusique != null)

document.getElementById('row'+lastidmusique).setAttribute("class", "row");

document.getElementById('row'+$(this).attr('data-idmusique')).setAttribute("class", "row highlighted");

SCM.play({title:$(this).attr('data-titre'),url:$(this).attr('data-lien')});

lastidmusique = $(this).attr('data-idmusique');

});

The dom which contains 'ajouterSon' :

<body style=" background-image: url('imgs/backgrnd.jpg'); background-size: 100% 100%; background-repeat:no-repeat; background-attachment:fixed;">

<div id="ajouterSon" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h1 class="text-center">Ajouter un son</h1>

<?php

?>

</div>

<div class="modal-body">

<form class="form col-md-12 center-block" id="ajoutSon">

<div class="form-group">

<input type="text" title="Titre du son" class="form-control input-lg" placeholder="Titre" id="titre">

</div>

<div class="form-group">

<input type="text" title="Auteur du son" class="form-control input-lg" placeholder="Artiste" id="artiste">

</div>

<div class="form-group">

<label for="genre">Style</label>

<div class="form-group">

<select class="selectpicker" multiple id="genre">

<?php

$genres = $mysqli->query("SELECT idgenre, nom FROM GENRE");

while($row = $genres->fetch_array())

$rows[] = $row;

mysqli_free_result($genres);

foreach($rows as $row)

{

$styles = $mysqli->query("SELECT idstyle, nom FROM STYLE WHERE GENRE = ".intval($row['idgenre']));

while($rowStyles = $styles->fetch_array())

$rowsStyles[] = $rowStyles;

echo "<optgroup label=\"".$row['nom']."\">";

foreach ($rowsStyles as $rowStyles)

echo "<option value=\"".$rowStyles['idstyle']."\">".$rowStyles['nom']."</option>";

echo "</optgroup>";

mysqli_free_result($styles);

unset($rowsStyles);

}

unset($rows);

?>

</select>

</div>

</div>

<div class="form-group">

<input type="text" title="Décris ton son" class="form-control input-lg" placeholder="Description" id="description">

</div>

<div class="form-group">

<input type="url" title="Lien Youtube/Soundcloud" class="form-control input-lg" placeholder="Lien Youtube/Soundcloud" id="lien">

</div>

<div class="form-group">

<button class="btn btn-primary btn-lg btn-block" type="submit" id="submit">Ajouter</button>

</div>

</form>

</div>

<div class="modal-footer">

<div class="col-md-12">

<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>

</div>

</div>

</div>

</div>

</div>

...

</body>

I precise that I have placed my include balise for the JS just above the end of the body.

Thank you for your help,

Théo

分享给朋友:
您可能感兴趣的文章:
随机阅读: