Problem I am encountering making a website Music Library to sell my songs online

user_3740152 0
Viewed 26

Hi all website development experts,

I am a newbie to website design.

I am 13 years old but my passion is to record my own music from the different instruments I play and I love singing as well.

I am trying to make my own online Music Library so that people can listen to some of my songs in full for free or listen to a preview of my songs and buy them online.

I have created an Album Web Page which displays all the songs I have uploaded to my ISP's Web Server.

I have either a Free Play or Preview Button listed for each song in the Album.

If the users click on this Image Button, I want it to change onclick to a Pause Button.

If the users then click on the Pause Image Button I want it to change back to the Free Play or Preview Button.

I also want the Song to continue to play from where the user clicked on the Pause Button until either the end of the song or the end of the preview length of 15 seconds for the song, if it is available as a Preview Song.

What is the easiest way to achieve this.

I have the following code so far:

Javascript:

<script>
function play(id){
   var audio = document.getElementById('audio'+id);
   audio.play();
}

function pause(id){
   var audio = document.getElementById('audio'+id);
   audio.pause();
}

function changSRC() {
    document.getElementById("imageid").src="/images/Song_Pause.png";
}
</script>

HTML:

<html>
<body>

<audio id="audio1">
   <source src="/songs/Hall-of-the-Mountain-King.mp3" type="audio/mpeg">
   <source src="/songs/Hall-of-the-Mountain-King.ogg" type="audio/ogg">
</audio>

<a href="javascript:play('1');"><img src="/images/Free_Play.png" align="center" width="100%" alt="Free Play" onclick="changSRC()" /></a>

<audio id="audio2">
   <source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.mp3#t=0,15" type="audio/mpeg">
   <source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.ogg#t=0,15" type="audio/ogg">
</audio>

<a href="javascript:play('2');"><img src="/images/Preview.png" align="center" width="100%" alt="Song Preview" onclick="changSRC()" /></a>

</body>
</html>

Now I am stuck.

How do I continue on from here to get the Songs to play again from when the user clicked on the Pause Button from the point they clicked on the Pause Button until the end of the 15 second preview or until the end of the song for the Free Play songs.

I will really appreciate any help. Thank you so much in advance!

Kind Regards,

Nancy

pause playback html5-audio swap image
1 Answers

you can put the free_play_or_preview and id parameters in "changSRC" and give parameters according to the song. In my solution if free_play_or_preview parameter is "f" image is free play image else image is preview image and you can find which element has which image with id parameter

Here is my solution :

<!DOCTYPE html>
<html>
<body>

<audio id="audio1">
   <source src="/songs/Hall-of-the-Mountain-King.mp3" type="audio/mpeg">
   <source src="/songs/Hall-of-the-Mountain-King.ogg" type="audio/ogg">
</audio>

<a href="javascript:play('1');"><img id="img1" src="/images/Free_Play.png" align="center" width="100%" alt="Free Play" onclick="changSRC('f',1)" /></a>

<audio id="audio2">
   <source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.mp3#t=0,15" type="audio/mpeg">
   <source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.ogg#t=0,15" type="audio/ogg">
</audio>

<a href="javascript:play('2');"><img id="img2" src="/images/Preview.png" align="center" width="100%" alt="Song Preview" onclick="changSRC('p',2)" /></a>

<script>
    function play(id){
       var audio = document.getElementById('audio'+id);
       audio.play();
    }
    
    function pause(id){
       var audio = document.getElementById('audio'+id);
       audio.pause();
    }
    
    function changSRC(free_play_or_preview,id) {
        if(document.getElementById(`img${id}`).src == "/images/Song_Pause.png"){
            if(free_play_or_preview == "f"){
                document.getElementById(`img${id}`).src == "/images/Free_Play.png"
            } else {
                document.getElementById(`img${id}`).src == "/images/Preview.png"
            }
        } else {
            document.getElementById(`img${id}`).src="/images/Song_Pause.png";
        }
    }
</script>

</body>
</html>
user_179398180
Related