Napisy dla <audio> z <track>, sposób wyświetlania napisów

Próbuję dodać transkrypcję tekstu mówionego pliku audio za pomocą znacznika śladu. Domyślnym zachowaniem tagu wideo jest wyświetlanie ich (działa). Domyślnie tag dźwiękowy wydaje się pozbawiony jakiegoś "płótna" (czarny obszar, który tag wideo wyświetla nawet bez wideo), aby wyświetlić napisy automatycznie. Mógłbym użyć tagu wideo, ale czułbym się jak brzydki sposób obejścia tego problemu. Nie chcę jednak łamać semantyki mojego kodu.Napisy dla <audio> z <track>, sposób wyświetlania napisów

Czy jest jakiś rodzaj CSS wymuszający wyświetlanie takiego obszaru, w którym będą wyświetlane podtypy?

<audio controls> 
    <source src="test.ogg" type="audio/ogg"> 
    <source src="test.mp3" type="audio/mpeg"> 
    <track kind="subtitles" label="English subtitles" src="/test.vtt" srclang="en" default></track> 
    Your browser does not support the audio tag. 
</audio>

Dziękuję za przeczytanie.

Źródło

2014-05-05 phl

Spróbuj zmienić atrybut "rodzaj" na "" napisy ". AFAIK '" subtitles "' są tylko dla '

Według [specyfikacji dla WebVTT] (http://dev.w3.org/html5/webvtt/#h4_processing-model). Obsługiwane są tylko elementy '

Zgodnie z [specyfikacją HTML 5.1 na elemencie ścieżki] (http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-track-element) utwory mogą być używane jako element multimedialny Audio jest elementem medialnym, śledzone zdarzenia działają dobrze w javascript, więc nie widzę problemu z ich używaniem w audio. Czy istnieje inny format pliku do użycia dla ścieżek audio następnie? – phl

Spróbuj użyć rodzaju = "atrybut" w tagu ścieżki.

Źródło

2015-11-16 20:08:06

Podobny wymóg próbuje zbudować wyświetlacz transkrypcji napisów dla dzienników audio dla osobistej aplikacji. Próbuję automatycznie przewijać i zaznaczać frazy tekstowe na podstawie dziennika audio. Nie znalazłem elementu wyświetlającego napisy w pliku .vtt ustawionego na elemencie, ponieważ nie ma dostępnego płótna podobnego do elementu wideo. Postanowiłem napisać niestandardowy komponent canvas, który wyświetli związany z nim plik .vtt i znajdzie to pod ręką w wersji demo HTML5 Video Caption maker, możesz zrobić mu zdjęcie.

Źródło

2016-08-01 22:42:46

Istnieje pseudoelement w html, który można wybrać w css do stylu napisów lub podpisów. To jest element ::cue, który można podać niektóre właściwości css, takie jak color, opacity, font i itp. Widzisz, wszystkie są stylami używanymi do tekstów.
Nauczyłem się tego, kiedy nauczyłem się używać znaczników video. Ale szukałem w google i znalazłem bardzo pomocny artykuł na temat MDN. Możesz zobaczyć wszystko o stylizacji podtytułów w here.
I nie ma powodu, aby używać wtyczek;).

Źródło

2017-03-17 17:39:47

Nie wiem, jak to zrobić za pomocą samego CSS, ale zrobiłem coś podobnego (niestandardowe wskazówki) ze ścieżkami tekstowymi wideo i JavaScript. Mam nadzieję, że powinieneś być w stanie wykorzystać te same zdarzenia TextTrack, aby osiągnąć to, co chcesz zrobić ze ścieżkami dźwiękowymi.

Możesz powiązać niestandardową funkcję ze zdarzeniem oncuechange ścieżki, a następnie użyć aktywnych ścieżek utworu do wygenerowania własnych napisów. Ten niestandardowy element div można następnie ustawić lub ustawić w dowolny sposób.

Powinieneś pobrać ścieżkę tekstową i pobrać tekst z aktualnie aktywnej pamięci za każdym razem, gdy nastąpi zmiana cue.

$('audio')[0].textTracks[0].oncuechange = function() { 
    var currentCue = this.activeCues[0].text; 
    $('#yourCustomCaptions').html(currentCue); 
}

Następnie pobierz tekst z każdej pamięci i wstaw go do niestandardowego elementu div, który chcesz wyświetlić.

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack

Źródło

2017-11-08 19:16:17

Napisy dla <audio> z <track>, sposób wyświetlania napisów

Odpowiedz

Powiązane problemy