Использование конструктора класса JS / JQ не позволяет воспроизвести звуковой элемент HTML - PullRequest
Новая
       6

Использование конструктора класса JS / JQ не позволяет воспроизвести звуковой элемент HTML

0 голосов
/ 10 декабря 2018

У меня есть следующий HTML 

<div data-song="song1" class="songs">
    <audio id="song1">
        <source src="audio/song1.mp3" type="audio/mpeg">
        Your browser does not support the audio element
    </audio>
</div>

<div data-song="song2" class="songs">
    <audio id="song2">
        <source src="audio/song2.mp3">
        Your browser does not support the audio element
    </audio>
</div>

и следующий Javascript / jQuery: 

var songs={};
$(".songs").each(function(){
    let id=$(this).attr("data-song");
    let song=$("#" + id);
    songs[id]=new Music(song);
    songs[id].play();
})

function Music(song) {
    this.song=song;
    this.play=function(){song.play();};
}

Когда я пытаюсь их воспроизвести, как в конце $ (элемент).each, я получаю сообщение об ошибке:

Uncaught TypeError: song.play не является функцией Music.play (main.js: 37) в: 1: 15

Куда я иду не так?Это кажется простым.

1 Ответ

0 голосов
/ 10 декабря 2018

Я бы попробовал одно из двух возможных решений:

Решение 1 

var songs={};

$(".songs").each(function(){
    let id = $(this).attr("data-song");
    let song = $("#" + id)[0];
    songs[id] = new Music(song);
    songs[id].play();
});

function Music(song) {
    this.song=song;
    this.play=function(){song.play();};
}

Решение 2 

var songs={};

$(".songs").each(function(){
    let id = $(this).attr("data-song");
    let song = $("#" + id);
    songs[id] = new Music(song);
    songs[id].play();
});

function isjQuery(obj) {
    return (obj && (obj instanceof jQuery || obj.constructor.prototype.jquery));
}

function Music(song) {
    this.song = isjQuery(song) ? song[0] : song;
    this.play = function(){song.play();};
}

Второй немного более крепкий.Таким образом, вы можете использовать музыку с элементом HTML или объектом jQuery.

Надеюсь, это поможет.

...