HTML Select - изменить звук src на select с помощью jQuery

Question

HTML Select - изменить звук src на select с помощью jQuery

0

У меня есть выбор меню с 3 разными песнями. Я пытаюсь переключить песню, когда я выбираю трек в меню.

Я пытаюсь использовать jQuery для этого, но без каких-либо результатов.

это код

HTML

<select id="changeselection" name="change-selection">

<option id="change1" value="change1" selected>Song 1</option>
<option id="change2" value="change2">Song 2</option>
<option id="change3" value="change3">Song 3</option>

</select>

<audio id="audio1" tabindex="0" controls="" type="audio/mpeg" controls preload loop>
<source id="audiochange" type="audio/mp3" src="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>

Jquery

$(document).ready(function() {

$("#change1").on("click",function(){
     var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
     $("#audiochange").attr("src",src);
 });

$("#change2").on("click",function(){
     var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
     $("#audiochange").attr("src",src);
 });

$("#change3").on("click",function(){
     var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
     $("#audiochange").attr("src",src);
 });
    });

Любой совет?

здесь скрипка

http://jsfiddle.net/BAR35/

SNos 08 май 2014, в 17:20

Источник

Теги:

jquery

html

audio

select

src

2 ответа

0

После изменения источника звука вам нужно под кодом ниже.

 audio=$("#audiochange");
 audio[0].pause();
 audio[0].load();//suspends and restores all audio element
 audio[0].play();

также у вас есть неправильные js, которые не будут работать с изменением опции. попробуй это:

$("#changeselection").on("change",function(){
 if($(this).val()=="change1")
  var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
 else if($(this).val()=="change2"){
   var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
 else 
   var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
  $("#audiochange").attr("src",src);
  audio=$("#audiochange");
  audio[0].pause();
  audio[0].load();//suspends and restores all audio element
  audio[0].play();
});});

Milind Anantwar 08 май 2014, в 12:57

0

Привет Милинд, спасибо за твой совет. Я пытался, как вы сказали, однако я получаю сообщение об ошибке "SyntaxError: Неожиданный токен 'else'" Здесь скрипта jsfiddle.net/salvonostrato/BAR35/1
SNos 08 май 2014, в 15:37
0

Также говорится, что «TypeError:« undefined »не является функцией (оценивает« audio [0] .pause () »)»
SNos 08 май 2014, в 15:50
0

здесь ошибка jsfiddle.net/salvonostrato/BAR35/3
SNos 08 май 2014, в 16:01

Показать ещё 1 комментарий

Ещё вопросы

Привет Милинд, спасибо за твой совет. Я пытался, как вы сказали, однако я получаю сообщение об ошибке "SyntaxError: Неожиданный токен 'else'" Здесь скрипта jsfiddle.net/salvonostrato/BAR35/1
Также говорится, что «TypeError:« undefined »не является функцией (оценивает« audio [0] .pause () »)»

SNos · Accepted Answer · 2014-05-08T13-24-00.000Z

http://jsfiddle.net/salvonostrato/BAR35/4/

Решила спасибо

HTML

<select id="changeselection" name="change-selection">

<option id="change1" value="change1" selected>Song 1</option>
<option id="change2" value="change2">Song 2</option>
<option id="change3" value="change3">Song 3</option>

</select>

<audio id="audio1" tabindex="0" controls="" type="audio/mpeg" controls preload loop>
<source id="audiochange" type="audio/mp3" src="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>

Jquery

$(document).ready(function() {

$("#changeselection").on("change",function(){

    if($(this).val()=="change2"){
  var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
        console.log('change2');
    }

    else if ($(this).val()=="change3"){
      var src = "http://www.archive.org/download/CanonInD_261/CanoninD.mp3";
        console.log('change3');
    }  

    else {
      var src = "http://www.archive.org/download/CanonInD_261/CanoninD.mp3";
        console.log('change1');
    }


  audio=$("#audio1");
  $("#audio1").attr("src",src);

  audio[0].pause();
  audio[0].load();//suspends and restores all audio element
  audio[0].play();

});
});