встраивание более одной песни на мою веб-страницу - PullRequest
Новая
       0

встраивание более одной песни на мою веб-страницу

1 голос
/ 03 декабря 2011

У меня есть этот код, который я использую для воспроизведения музыки на моей веб-странице, которую я разрабатываю, но у меня возникают проблемы с тем, как встроить или воспроизвести более одной песни .. Я хочу, чтобы когда люди заходили на мой сайт, они могли воспроизводить музыку. о том, как я могу изменить этот код ?? 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Welcome to Groundswell </title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $("#play-bt").click(function(){
            $("#audio-player")[0].play();
            $("#message").text("Music started");
        })

        $("#pause-bt").click(function(){
            $("#audio-player")[0].pause();
            $("#message").text("Music paused");
        })

        $("#stop-bt").click(function(){
            $("#audio-player")[0].pause();
            $("#audio-player")[0].currentTime = 0;
            $("#message").text("Music Stopped");
        })
    })
</script>
</head>

<body>

<audio id="audio-player" name="audio-player" src="02 - Hillsong - Run.mp3"></audio>
<div id="message"></div>
<a id="play-bt" href="#">Play music</a> | <a id="pause-bt" href="#">Pause music</a> | <a id="stop-bt" href="#">Stop music</a>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 03 декабря 2011

Просто идея, возможно, стоит взглянуть на HTML5 Audio

http://www.w3schools.com/html5/html5_audio.asp

0 голосов
/ 03 декабря 2011

В разделе сценария добавьте массив всех файлов песен, затем создайте функцию (или две), которая будет динамически устанавливать src вашего аудиоэлемента. 

<script>
var songlist=['02 - Hillsong - Run.mp3','song2.mp3','song_n.mp3'];
var whichsong=0;
var playing=false;
$(document).ready(function(){
    $("#play-bt").click(function(){
        $("#audio-player")[0].play();
        playing=true;
        $("#message").text("Music started");
    })

    $("#pause-bt").click(function(){
        $("#audio-player")[0].pause();
        playing=false;
        $("#message").text("Music paused");
    })

    $("#stop-bt").click(function(){
        $("#audio-player")[0].pause();
        $("#audio-player")[0].currentTime = 0;
        playing=false;
        $("#message").text("Music Stopped");
    })

    $("#next-bt").click(function(){
       $("#audio-player")[0].pause();
       $("#audio-player")[0].src='';
       whichsong++;
       if(whichsong==songlist.length){whichsong=0;}
       $("#audio-player")[0].src=songlist[whichsong];
       if(playing){$("#audio-player")[0].play();}
    })
})
</script>

, а затем добавьте еще одну ссылку для «Далее» с помощью id="next-bt" (и вы, вероятно, сможете выяснить, как сделать предыдущую кнопку)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...