Stocker variable qui s'incremente en javascript php

ok je m'explique

j’ai une table que j’ai nommé chant dans la base des donnéés qui a comme champ

numchant(PRYMARY KEY auto_incremente), titre_chant, nom_album, nom_auteur_compositeur, son et jai ajouter un chant compteur que jai nommé compt_lec

ma variable est en javascript var compt_lec voici le code

<script>
	audioPlayer.onended = function addone(){
		var compt_lec = 0;
		var compt_lec = document.getElementById('compteur').innerHTML;
		compt_lec++;
																document.getElementById('compteur').innerHTML = compt_lec;
																					
		}
																				
</script>

voici le compteur en HTML

<div id="compteur">0</div>

Le compteur s’incrémente parfaitement bien sauf que quand j'actualise il se réinitialise à 0
J'ai compris qu'il faudrait le sauvegarder dans la base des données dans le champ compt_lec que j'avais créé dans ma base des données sauf que je n'arrive pas à récupérer cette variable js pour l'enregistrer dans la base des données.

Donc ce que je veux si un utilisateur clic le bouton play (que j'ai remplacer par une image play) le compteur s’incrémente. En d'autre terme le compteur doit comptabiliser le nombre de lecture d'un fichier audio.

Voici mon code ouu j'ai place le bouton play

	
 <span onclick="addone()">
  <span class="play" onclick="play('audioPlayer',this)"><img src="js/bouton/play.jpeg" class="btn_lec"></span>
 </span>

Merci

C'est-à-dire quand la page s'actualise le compteur revient à Zéro justement parce qu'il n'est pas stocké quelque pas.
Ce que je vais c'est de stocker la valeur de ce compteur dans la base des données.